詳解css中的position屬性

時間 2019-12-10

標籤詳解 css position 屬性欄目 CSS 简体版

原文原文鏈接

這一次直接進入主題。css

css中最經常使用的佈局類屬性，一個是float，另外一個就是定位屬性position。html

對於position來說，有如下屬性值：瀏覽器

static : 無特殊定位，對象處於正常文檔流。其中，left/right/top/bottom/z-index均沒法生效。
relative : 對象遵循正常文檔流。但將依據left/right/top/bottom等屬性在正常文檔流中偏移位置。可經過設置z-index控制層疊優先級。
absolute : 對象脫離正常文檔流。配合使用left/right/top/bottom等屬性進行絕對定位。一樣，能夠經過z-index控制其層疊優先級。
fixed : 對象脫離正常文檔流。配合使用top,right,bottom,left等屬性以當前瀏覽器窗口進行定位。當出現滾動條時，對象不會隨着滾動。其層疊屬性經過z-index控制。ide

所謂文檔流，是指瀏覽器在渲染頁面時，從上至下，從左至右的渲染和排列元素。有三種手段可使指定的元素脫離文檔流，即浮動、絕對定位和相對定位。佈局

下面咱們來分別探討position指定的定位方式。post

1，靜態定位(static)
static是html元素默認的定位方式，它遵循正常的文檔流渲染。爲元素指定left/right/top/bottom及z-index均無效。測試

2，相對定位(relative)
顧名思義，relative及相對定位。這裏的重點是相對，相對於什麼地方而言呢？咱們來作一個測試。spa

(1)，原始未定位3d

<head>
    <style type="text/css">
        #divA{
            width:300px;
            height:100px;
            border:1px solid blue;
        }
        #divB{
            width:300px;
            height:100px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="divA">
        contentA
    </div>
    <div id="divB">
        contentB
    </div>
</body>

View Code

頁面顯示爲：code

(2)，咱們修改divA元素的position屬性。

<head>
    <style type="text/css">
        #divA{
            width:300px;
            height:100px;
            border:1px solid blue;
            position:relative;
            top:20px;
            left:20px;
        }
        #divB{
            width:300px;
            height:100px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="divA">
        contentA
    </div>
    <div id="divB">
        contentB
    </div>
</body>

View Code

頁面顯示爲：

我本身又另外畫了一副圖：

如今應該可以明白，相對定位相對的是它本來在文檔流中的位置而進行的偏移，而咱們也知道relative定位也是遵循正常的文檔流，同時它的left/right/top/bottom屬性是生效的，能夠說它是static到absoult的一箇中間過渡屬性，最重要的是它還佔有文檔空間，並且佔據的文檔空間不會隨top,left,right,bottom等屬性的偏移而發生變更，也就是說它後面的元素是依據上面綠色框所示的位置進行的定位，這點必定要理解。

ok,咱們知道了left/right/top/bottom屬性是不會對relative定位的元素所佔據的文檔空間產生偏移，那麼margin,padding會讓該文檔空間產生偏移嗎？咱們依然來作一個實驗。

<head>
    <style type="text/css">
        #divA{
            width:300px;
            height:100px;
            border:1px solid blue;
            position:relative;
            top:20px;
            left:20px;
            margin-bottom:20px;
        }
        #divB{
            width:300px;
            height:100px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="divA">
        contentA
    </div>
    <div id="divB">
        contentB
    </div>
</body>

View Code

結果爲：

咱們爲divA設置了margin-bottom:20px; 由上面的渲染結果示意圖可知。margin一樣會讓relative定位的元素所佔據的文檔空間產生偏移。同理，padding也會對relative定位的元素據點的文檔空間產生影響。

3，絕對定位(absoulte)
所謂absoulte定位，也稱爲絕對定位。雖然它的名字叫"絕對"，但我認爲它的功能卻更接近於"相對"。由於使用absoult定位的元素脫離文檔流後，就只能根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的。舉個例子，一個div元素使用absoulte定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素，直到<html>標籤爲止.這裏還須要注意的是，relative和static方式在最外層時是以<body>標籤爲定位原點的，而absoulte方式在無父級是position非static定位時是以<html>做爲原點定位。在我使用的Chrome瀏覽器中，<html>和<body>元素相差9px左右。

<head>
    <style type="text/css">
        #divA{
            width:300px;
            height:100px;
            border:1px solid    ;
            position:absolute;          
            left:20px;
            top:20px;
        }
        #divB{
            width:300px;
            height:100px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="divA">
        contentA
    </div>
    <div id="divB">
        contentB
    </div>
</body>

View Code

渲染結果爲：

能夠看到，應用了position:absolute的元素，已脫離了正常的文檔流，其本來在文檔中的位置會由其後繼元素進行填充。

看了上面的代碼後，可能有朋友會問，爲何absoulte定位要加 top:0; left:0; 屬性，這不是畫蛇添足呢？
其實加上這兩個屬性是徹底必要的，由於咱們若是使用absoulte或fixed定位的話，必須指定left/right/top/bottom屬性中的至少一個，不然left/right/top/bottom屬性會使用它們的默認值 auto ，這將致使對象聽從正常的HTML佈局規則，簡單講就是都變成relative，會佔用文檔空間.這點很是重要，不少人使用absolute定位後發現沒有脫離文檔流就是這個緣由。

少了left/right/top/bottom屬性不行，那若是咱們多設了呢？例如，咱們同時設置了top和bottom的屬性值，那元素又該往哪偏移好呢？記住下面的規則：

若是top和bottom同時存在的話，那麼只有top生效。
若是left和right同時存在的話，那麼只有left生效。

既然absoulte是根據祖先類中的position非static元素進行定位的，那麼祖先類中的margin/padding會不會對position產生影響呢？

<head>
    <style type="text/css">
        #divA{
            width:300px;
            height:100px;
            border:1px solid blue;
            position:relative;  
            margin:20px;        
            padding:20px;
        }
        #divB{
            width:300px;
            height:100px;
            border:1px solid red;
            position: absolute;
            top:20px;
            left:20px;
        }
    </style>
</head>
<body>
    <div id="divA">
        contentA

        <div id="divB">
            contentB
        </div>
    </div>
    
</body>

View Code

頁面顯示爲：

顯而易見，祖先類的margin會讓子類的absoulte跟着偏移，而padding卻不會讓子類的absoulte發生偏移。總結一下，就是absoulte是根據祖先類的border進行的定位。

4，固定定位(fixed)
fixed定位，又稱爲固定定位，它和absoult定位同樣，都脫離了文檔流，而且可以根據left/right/top/bottom屬性進行定位，但不一樣的是fixed是根據窗口爲原點進行偏移定位的，也就是說它不會根據滾動條的滾動而進行偏移。

5，z-index屬性

z-index，又稱爲對象的層疊順序，它用一個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，固然這是指同級元素間的堆疊，若是兩個對象的此屬性具備一樣的值，那麼將依據它們在HTML文檔中流的順序層疊，寫在後面的將會覆蓋前面的。須要注意的是，父子關係是沒法用z-index來設定上下關係的，必定是子級在上父級在下。

須要注意的是，使用static定位或無position定位的元素z-index屬性是無效的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。