CSS中的定位語法是什么

這篇文章主要介紹“CSS中的定位語法是什么”，在日常操作中，相信很多人在CSS中的定位語法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS中的定位語法是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、CSS定位：position

◆語法：

position:static|absolute|fixed|relative

◆取值：

static:默認值。無特殊定位，對象遵循HTML定位規則。

absolute:將對象從文檔流中拖出，使用left，right，top，bottom等屬性相對于其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據body對象。而其層疊通過z-index屬性定義。

fixed:未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規范。

relative:對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置。

◆說明：檢索對象的定位方式。

設置此屬性值為absolute會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內容的布局。假如其他具有不同z-index屬性的對象已經占據了給定的位置，他們之間不會相互影響，而會在同一位置層疊。此時對象不具有外補丁(margin)，但仍有內補丁(padding)和邊框(border)。

要激活對象的絕對(absolute)定位，必須指定left，right，top，bottom屬性中的至少一個，并且設置此屬性值為absolute。否則上述屬性會使用他們的默認值auto，這將導致對象遵從正常的HTML布局規則，在前一個對象之后立即被呈遞。

設置此屬性值為relative會保持對象在正常的HTML流中，但是它的位置可以根據它的前一個對象進行偏移。在相對(relative)定位對象之后的文本或對象占有他們自己的空間而不會覆蓋被定位對象的自然空間。與此不同的，在絕對(absolute)定位對象之后的文本或對象在被定位對象被拖離正常文檔流之前會占有它的自然空間。放置絕對(absolute)定位對象在可視區域之外會導致滾動條出現。而放置相對(relative)定位對象在可視區域之外，滾動條不會出現。

內容的尺寸會根據布局確定對象的尺寸。例如，設置一個div對象的height和position屬性，則div對象的內容將決定它的寬度(width)。

此屬性對于currentStyle對象而言是只讀的。對于其他對象而言是可讀寫的。對應的腳本特性為position。

◆示例：

div{position:relative;top:-3px}

二、CSS定位：Z-index

◆語法：

z-index:auto|number

◆取值：

auto:默認值。遵從其父對象的定位
number:無單位的整數值。可為負數

◆說明：

檢索或設置對象的層疊順序。

較大number值的對象會覆蓋在較小number值的對象之上。如兩個絕對定位對象的此屬性具有同樣的number值，那么將依據它們在HTML文檔中聲明的順序層疊。對于未指定此屬性的絕對定位對象，此屬性的number值為正數的對象會在其之上，而number值為負數的對象在其之下。設置參數為null可以移除此屬性。

此屬性僅僅作用于position屬性值為relative或absolute的對象。這個屬性不會作用于窗口控件，如select對象。在IE5.5+中，iframe對象開始支持此屬性。而在之前的瀏覽器版本中，iframe對象是窗口控件，會忽略此屬性。此屬性對于currentStyle對象而言是只讀的。對于其他對象而言是可讀寫的。對應的腳本特性為zIndex。

◆示例：

div{position:absolute;z-index:3;width:6px;}

三、CSS定位：top

◆語法：

top:auto|length

◆取值：

auto:默認值。無特殊定位，根據HTML定位規則在文檔流中分配。

length:由浮點數字和單位標識符組成的長度值|百分數。必須定義position屬性值為absolute或者relative此取值方可生效。

◆說明：

檢索或設置對象與其最近一個具有定位設置的父對象頂邊相關的位置。

此屬性僅僅在對象的定位(position)屬性被設置時可用。否則，此屬性設置會被忽略。此屬性對于currentStyle對象而言是只讀的。對于其他對象而言是可讀寫的。對應的腳本特性為top。其值為一字符串，所以不可用于腳本(Scripts)中的計算。請使用style對象的posTop，pixelTop等運行時特性，以及對象的offsetTop等特性。

◆示例：

以下是引用片段：

div{position:absolute;top:1in;}  iv{position:relative;top:-3px;left:6px;}

四、CSS定位：right

◆語法：

right:auto|length

◆取值：

auto:默認值。無特殊定位，根據HTML定位規則在文檔流中分配。

length:由浮點數字和單位標識符組成的長度值|百分數。必須定義position屬性值為absolute或者relative此取值方可生效。

◆說明：

檢索或設置對象與其最近一個具有定位設置的父對象右邊相關的位置。

此屬性僅僅在對象的定位(position)屬性被設置時可用。否則，此屬性設置會被忽略。此屬性對于currentStyle對象而言是只讀的。對于其他對象而言是可讀寫的。對應的腳本特性為right。其值為一字符串，所以不可用于腳本(Scripts)中的計算。請使用style對象的posRight，pixelRight等運行時特性。

◆示例：

以下是引用片段：

div{position:absolute;right:1in;}  div{position:relative;top:-3px;right:6px;}

五、CSS定位：bottom

◆語法：

bottom:auto|length

◆取值：

auto:默認值。無特殊定位，根據HTML定位規則在文檔流中分配。

length:由浮點數字和單位標識符組成的長度值|百分數。必須定義position屬性值為absolute或者relative此取值方可生效。

◆說明：

檢索或設置對象與其最近一個具有定位設置的父對象底邊相關的位置。此屬性僅僅在對象的定位(position)屬性被設置時可用。否則，此屬性設置會被忽略。此屬性對于currentStyle對象而言是只讀的。對于其他對象而言是可讀寫的。對應的腳本特性為bottom。其值為一字符串，所以不可用于腳本(Scripts)中的計算。請使用style對象的posBottom，pixelBottom等運行時特性。

◆示例：

以下是引用片段：

div{position:absolute;bottom:1in;}  div{position:relative;bottom:6px;}

六、CSS定位：left

◆語法：

left:auto|length

◆取值：

auto:默認值。無特殊定位，根據HTML定位規則在文檔流中分配。

length:由浮點數字和單位標識符組成的長度值|百分數。必須定義position屬性值為absolute或者relative此取值方可生效。

◆說明：

檢索或設置對象與其最近一個具有定位設置的父對象左邊相關的位置。

此屬性僅僅在對象的定位(position)屬性被設置時可用。否則，此屬性設置會被忽略。此屬性對于currentStyle對象而言是只讀的。對于其他對象而言是可讀寫的。對應的腳本特性為left。其值為一字符串，所以不可用于腳本(Scripts)中的計算。請使用style對象的posLeft，pixelLeft等運行時特性，以及對象的offsetLeft等特性。

◆示例：

以下是引用片段：

div{position:absolute;left:1in;}  div{position:relative;top:-3px;left:6px;}

到此，關于“CSS中的定位語法是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！