CSS詳細解讀定位

時間 2020-03-11

標籤 css 詳細解讀定位欄目 CSS 简体版

原文原文鏈接

一前言

CSS定位是CSS佈局只可以重要的一環。本篇文章帶你解讀定位屬性，可讓你更加深刻的理解定位帶來的一些特性，熟練使用CSS佈局。css

二正文

1.文檔流佈局的概念

將窗體自上而下分紅一行行，並在每行中按從左至右的順序排放元素，即爲文檔流。 每一個非浮動塊級元素都獨佔一行，浮動元素則按規定浮在行的一端。若當前行容不下，則另起新行再浮動。 內聯元素也不會獨佔一行。幾乎全部元素(包括塊級，內聯和列表元素）都可生成子行，用於擺放子元素。
 有三種狀況將使得元素脫離文檔流而存在，分別是浮動，絕對定位，固定定位。可是在IE6中浮動元素也存在於文檔流中。html

如上圖所示，這就是正常的文檔流佈局。一個一個挨着的，到頭了，另起一行，接着排布。segmentfault

2.知識基礎

（1）相對定位：相對定位的元素是在文檔中的正常位置偏移給定的值，可是不影響其餘元素的偏移。相對定位的元素並未脫離文檔流。
（2）絕對定位：絕對定位的元素則脫離了文檔流。在佈置文檔流中其它元素時，絕對定位元素不佔據空間。絕對定位元素相對於最近的非static祖先元素定位。當這樣的祖先元素不存在時，則相對於根級容器定位。
（3）固定定位：固定定位與絕對定位類似，也脫離了文檔流，但元素的包含塊爲viewport視口。該定位方式經常使用於建立在滾動屏幕時仍固定在相同位置的元素。
（4）默認定位：文檔中按照正常順序出現的定位。瀏覽器

3.相對定位

position:relative 佈局

什麼是相對定位？相對什麼定位？這是重要的問題。個人回答是——相對本身文檔流中的原始位置定位。它的特色是——不會脫離文檔流。
也就是說，使用position:relative定位，其元素依舊在文檔流中，他的位置可使用left、right、top、bottom、z-index等定位參數，可是，它的存在，仍是會影響文檔中緊跟在他周圍的元素的。
下面，咱們看一下實際效果。spa

如上圖的演示，我給test3加上了position:relative定位效果。
代碼以下：3d

position: relative;
left: -20px;
top: 20px;

能夠清晰的從圖上看出來，test3根據CSS參數left: -20px;top: 20px;發生了位移。
可是！可是！可是！重要的事情說三遍，它的位移並無對周圍的元素有任何的影響！！它依然存在於文檔流中。它的位移是根據它在文檔流中的原始位置發生的！！這一點很是很是重要。code

4.固定定位

position:fixed htm

相比而言，這個參數是最好理解的。它相對於瀏覽器的窗口進行定位。同時——它會脫離文檔流。blog

代碼以下：

position: fixed;
right:20px;
top: 20px;

這是初始狀態，咱們能夠看到它的特色：
它脫離了文檔流，原來文檔流中不存在它的位置，test4好像test3不存在同樣的緊貼在了test2的後面。它的right:20px;top: 20px;參數是相對瀏覽器窗口定位的。
好，咱們再來看一下，當頁面發生滾動的效果圖：

當頁面發生了滾動，咱們能夠看到，頁面的內容已經根據滾動條的位置發生了位移。可是咱們的test3 依舊是在相對於瀏覽器的位置。

5.絕對定位

position:absolute
絕對定位是一個很是牛逼的屬性，牛逼到，你不知道會發生什麼。注意，它的解釋是什麼——「生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。」
也就是說，它能夠相對於各類各樣的東西進行定位。除了 static 其餘均可以！！！注意！注意！注意！是除了！
也正是由於這一牛逼特性，致使不少人對此概念混亂。其實，這個一點也不混亂，咱們能夠將概念理順了，分紅幾個狀況來講。

PS:position:absolute和position:fixed同樣是會脫離文檔流的。這裏就不解釋脫離文檔流的問題，主要研究它的定位問題。

(1)它的全部父元素的屬性都是 position:static
怎麼理解這個標題？position:static 是全部html元素默認參數。就是說，這個元素的全部上級元素，你都沒有使用過定位方式。
咱們經過以下代碼模擬一個場景：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>

如上，test3是test2的子元素，test1的孫元素。咱們來看一下效果圖：

如上圖所示。咱們能夠看到，test3既沒有相對於父元素定位，也沒有相對於爺元素定位。它竟然和position:fixed同樣！相對於瀏覽器定位了！！
！！！這是一個錯覺！！！
咱們來看一下瀏覽器發生滾動以後的效果，以下圖所示：

如上圖所示，它並不是是相對於瀏覽器定位，而是相對於文檔定位。
若是你有一點js基礎的話，那麼應該很容易理解。$(document)和$(window)的差異（爲了看得清楚，用了JQ寫法）
相對於文檔，就是相對於整個頁面來進行佈局，而相對於窗口，則是相對於瀏覽器的可視區域進行定位，這兩者有本質的區別的。
這種狀況在實際應用中有，可是很少。

(2)它的父元素的屬性是 position:relative
上面，咱們已經說過了，position:relative是相對於自身原始位置定位，其自身並無脫離文檔流。而它的子元素，使用position:absolute參數是什麼效果呢？咱們來作個試驗。下面是代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;position: relative;left: 50px;top: 50px;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: -20px;top: -20px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>

咱們給test2加上了position:relative屬性，並給出了偏移值，而後，再給test3使用絕對定位，使用了爲負數的偏移值，咱們來看一下效果圖，以下：

從上圖咱們能夠看到，test2如咱們所願的，相對於自身的位置發生了偏移，而test3則相對於test2發生了偏移。
從這個試驗咱們能夠看出，當一個元素設置了position:absolute屬性以後，而它的父元素的屬性爲position:relative則，它再也不是相對於文檔定位，而是相對於父元素定位。
這一點很是重要。最最重要的是--父元素設置爲position:relative並不會脫離文檔流，也就是說——利用給父元素設置position:relative屬性，再將子元素設置爲position:absolute就能夠在文檔流中實現須要的定位。這一點異常重要，也是很是經常使用的方法！（PS:基本上焦點圖等常見應用，都是使用了這種方式）。

(3)它的父元素的屬性是 position:fixed
上面，咱們說了父元素爲position:relative的狀況，這種狀況比較常見，那麼它的父元素爲position:fixed 又是什麼狀況呢？若是你聰明的話，應該有了答案。咱們來作一個試驗，來印證一下你的想法。代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;position: fixed;right: 20px;top: 20px;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;left: -40px;top: 40px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>

好，咱們能夠看到我給test2加上了position: fixed;right: 20px;top: 20px; 它會相對於瀏覽器窗口定位，而test3做爲test2的子元素，咱們加上了position: absolute;left: -40px;top: 40px;那麼，根據咱們的想象，它應該相對於test2做出偏移。那麼是否是這個狀況呢？咱們來看一下效果圖：

如上圖所示，看到了具體的效果了吧！是否是和你想象的是同樣的呢？

(4)它的父元素的屬性是 position:absolute
好，咱們來看一下，若是position:absolute嵌套position:absolute元素將會出現什麼狀況呢？
寫了這麼多，其實你應該有了必定的預見性了吧？好，咱們來作試驗，代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;position: absolute;right: 20px;top: 20px;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>

如上所示，test2咱們使用了position: absolute;right: 20px;top: 20px;參數，那麼，它會相對於文檔做出設定的偏移值。而咱們給test3使用了一樣的css樣式。若是test3也是相對於文檔定位的話，那麼它和test2應該是重疊的。
可是，咱們根據上面的解釋，test3應該相對於test2定位纔對，那麼是否是呢？咱們看效果

如上圖所示，果真，test2相對於文檔偏移，而test3相對於test2偏移。

6.position 以及參數總結

position: relative;不會脫離文檔流，position: fixed;position: absolute;會脫離文檔流
position: relative; 相對於本身在文檔流中的初始位置偏移定位。
position: fixed; 相對於瀏覽器窗口定位。
position: absolute; 是相對於父級非position:static 瀏覽器定位。
若是沒有任何一個父級元素是非position:static屬性，則會相對於文檔定位。
這裏它的父級元素是包含爺爺級元素、祖爺爺級元素、祖宗十八代級元素的。任意一級均可以。
若是它的父級元素和爺爺級元素都是非position:static 屬性，則，它會選擇距離最近的父元素。