CSS入門11-定位與覆蓋

（注1：如果有問題歡迎留言探討，一起學習！轉載請注明出處，喜歡可以點個贊哦！）
（注2：更多內容請查看我的目錄。）

1. 簡介

我們提到過css的定位機制。正常不作處理的html元素遵循普通文檔流，但是有些定位方式會讓這些元素脫離文檔流。那么這些脫離的文檔流如果與其他元素形成重疊，誰能夠占據優勢呢？

2. 普通文檔流與脫離普通文檔流

可以分為三類：

元素若不指定，使用默認定位static，屬于普通文檔流。
指定使用realtive定位，可以相對在普通文檔流中的位置進行偏移，但仍然屬于普通文檔流。
指定使用absolute， fixed定位或者float浮動，會使元素脫離普通文檔流。

3. 定位之間的覆蓋

3.1 相同定位之間的覆蓋

3.1.1 static與static

這種情況，在普通文檔流中，無覆蓋。

3.1.2 relative與relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.1.2</title>
    <style>
        .relative1 {
            background-color: blue;
            position: relative;
            top: 15px;
        }
        .relative2 {
             background-color: green;
             position: relative;
             top: 0px;
         }
        .relative3 {
            background-color: red;
            position: relative;
            top: 0px;
        }
        .relative4 {
            background-color: yellow;
            position: relative;
            top: -15px;
        }
    </style>
</head>
<body>
<div class="relative1">relative1</div>
<div class="relative2">relative2</div>
<div class="relative3">relative3</div>
<div class="relative4">relative4</div>
</body>
</html>

3.1.2

由圖看出，relative之間后者覆蓋前者

3.1.3 absolute之間（fixed與absolute只是定位的參考對象不一樣，但是覆蓋的優先級一樣，故在此將其合并為一個討論）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.1.3</title>
    <style>
        .relative {
            position: relative;
        }
        .absolute1 {
            background-color: blue;
            position: absolute;
            top: 20px;
        }
        .absolute2 {
             background-color: green;
             position: absolute;
             top: 20px;
         }
        .absolute3 {
            background-color: red;
            position: absolute;
            top: 40px;
        }
        .absolute4 {
            background-color: yellow;
            position: absolute;
            top: 40px;
        }
        .fixed1 {
            background-color: black;
            position: fixed;
            top: 20px;
        }
        .fixed2 {
            background-color: purple;
            position: fixed;
            top: 20px;
        }
        .fixed3 {
            background-color: black;
            position: fixed;
            top: 50px;
        }
        .fixed4 {
            background-color: purple;
            position: fixed;
            top: 50px;
        }
    </style>
</head>
<body>
<div calss="relative">
    <div class="fixed1">fixed1</div>
    <div class="fixed2">fixed2</div>
    <div class="absolute1">absolute1</div>
    <div class="absolute2">absolute2</div>
</div>
<div class="relative">
    <div class="absolute3">absolute3</div>
    <div class="absolute4">absolute4</div>
    <div class="fixed3">fixed3</div>
    <div class="fixed4">fixed4</div>
</div>
</body>
</html>

3.1.3

從圖中可以看出，absolute，fixed同級且后者覆蓋前者。

3.1.4 float之間的覆蓋

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.1.4</title>
    <style>
        .float-l {
            float: left;
        }
        .float-r {
            float: right;
        }
    </style>
</head>
<body>
<div class="float-l">left</div>
<div class="float-l">left</div>
<div class="float-l">left</div>
<div class="float-l">left</div>
<div class="float-l">left</div>
<div class="float-l">left</div>
<div class="float-r">right</div>
<div class="float-r">right</div>
<div class="float-r">right</div>
<div class="float-r">right</div>
<div class="float-r">right</div>
<div class="float-r">right</div>
</body>
</html>

3.1.4-1

3.1.4-2

3.1.4-3

可以看出，利用float，元素排滿一行以后會自動換行，不會覆蓋。

3.2 不同定位之間的覆蓋

3.2.1 static與relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.2.1</title>
    <style>
        .static {
            background-color: blue;
        }
        .relative1 {
             background-color: green;
             position: relative;
             top: -20px;
         }
        .relative2 {
            background-color: green;
            position: relative;
            top: 20px;
        }
    </style>
</head>
<body>
<div class="static">static1</div>
<div class="relative1">relative1</div>
<div class="relative2">relative2</div>
<div class="static">static2</div>
</body>
</html>

3.2.1

可以看出，relative覆蓋static

3.2.2 static與absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.2.2</title>
    <style>
        .static {
            background-color: blue;
        }
        .absolute1 {
             background-color: green;
             position: absolute;
             top: 20px;
         }
        .absolute2 {
            background-color: red;
            position: absolute;
            top: 40px;
        }
    </style>
</head>
<body>
<div class="static">static1</div>
<div class="absolute1">absolute1</div>
<div class="absolute2">absolute2</div>
<div class="static">static2</div>
</body>
</html>

3.2.2

可以看出，static被absolute覆蓋。

3.2.3 static與float

<span class="float-l">left</span>

3.2.3-1

3.2.3-2

由圖可以看出，static被float覆蓋，但是不會覆蓋其內容。

3.2.4 relative與absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.2.4</title>
    <style>
        .relative1 {
             background-color: green;
             position: relative;
             top: 20px;
         }
        .relative2 {
            background-color: green;
            position: relative;
            top: 20px;
        }
        .absolute1 {
            background-color: blue;
            position: absolute;
            top: 20px;
        }
        .absolute2 {
            background-color: blue;
            position: absolute;
            top: 60px;
        }
    </style>
</head>
<body>
<div class="absolute1">absolute1</div>
<div class="relative1">relative1</div>
<div class="relative2">relative2</div>
<div class="absolute2">absolute2</div>
</body>
</html>

3.2.4

由圖看出，relative與absolute是后來者居上。

3.2.5 relative與float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.2.5</title>
    <style>
        .relative1 {
             background-color: blue;
             position: relative;
             left: -10px;
         }
        .relative2 {
            background-color: blue;
            position: relative;
            left: 30px;
        }
        .float-l {
            background-color: green;
            float: left;
         }
        .float-r {
            background-color: green;
            float: right;
        }
    </style>
</head>
<body>
<span class="relative1">relative11111111111</span>
<span class="float-l">left</span>
<span class="float-r">right</span>
<span class="relative2">relative222222222</span>
</body>
</html>

3.2.5

右圖可以看出，relative覆蓋float。

3.2.6 absolute與float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.2.6</title>
    <style>
        .absolute1 {
             background-color: blue;
             position: absolute;
             left: 30px;
         }
        .absolute2 {
            background-color: blue;
            position: absolute;
            left: 200px;
        }
        .float-l {
            background-color: green;
            float: left;
         }
        .float-r {
            background-color: green;
            float: right;
        }
    </style>
</head>
<body>
<span class="absolute1">absolute11111111111</span>
<span class="float-l">left</span>
<span class="float-r">right</span>
<span class="absolute2">absolute222222222</span>
</body>
</html>

3.2.6

由圖可以看出，absolute覆蓋float。

4. z-index

前面我們看到的是先后順序和定位類型對覆蓋的影響，那么有沒有一種更靈活的方式來決定元素的覆蓋關系呢。答案是有的，就是z-index。但是z-index只對relative，absolute和fixed生效，對static和float無效。

4.1 z-index對定位元素的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test4.1</title>
    <style>
        .static1 {
            position: static;
            background-color: pink;
        }
        .relative1 {
            background-color: blue;
            position: relative;
            top: -7px;
        }
        .absolute1 {
            background-color: red;
            position: absolute;
            top: 20px;
        }
        float1 {
            background-color: green;
            float: left;
        }
        .static2 {
            position: static;
            background-color: pink;
            z-index: 999;
        }
        .relative2 {
            background-color: blue;
            position: relative;
            top: -7px;
            z-index: 888;
        }
        .absolute2 {
            background-color: red;
            position: absolute;
            top: 60px;
            z-index: 777;
        }
    </style>
</head>
<body>
<div class="static1">static1</div>
<div class="relative1">relative1</div>
<div class="absolute1">absolute1</div>
<div class="static2">static2</div>
<div class="relative2">relative2</div>
<div class="absolute2">absolute2</div>
</body>
</html>

4.1

可以看到，z-index對定位元素中的static無效，對于其余定為元素，z-index
默認值為0，可以設置為任意整數（注意，設置為小數不會生效），z-index越大，元素層級越高。

4.2 z-index對float的作用

在3.2.6的代碼中加入z-index，看一下是否會有作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test4.2</title>
    <style>
        .absolute1 {
            background-color: blue;
            position: absolute;
            left: 30px;
            z-index: 666;
         }
        .absolute2 {
            background-color: blue;
            position: absolute;
            left: 200px;
            z-index:666;
        }
        .float-l {
            background-color: green;
            float: left;
            z-index:999;
         }
        .float-r {
            background-color: green;
            float: right;
            z-index:999;
        }
    </style>
</head>
<body>
<span class="absolute1">absolute11111111111</span>
<span class="float-l">left</span>
<span class="float-r">right</span>
<span class="absolute2">absolute222222222</span>
</body>
</html>

4.2

可以對比3.2.6看出z-index對于float無效。

另外，z-index對元素層級的影響是依賴于其祖先元素的，把頁面看做一層層的盒子疊加而成的話，如果A盒的z-index比B盒大，那么A盒會在B盒之上，此時即使A盒內的元素a的z-index比B盒內的元素b的z-index小，a也會在b之上。這一點其實很容易理解，因為A盒內即使放在最下面的一張紙其實也是比B盒內最上面的一張紙更高。

5. 總結

相同定位（relative，absolute，fixed）之間按先后順序后者覆蓋前者。
不同定位之間static < float < relative,absolute,fixed
z-index能影響relative，absolute，fixed的層級，越大越靠上，相同時按先后順序后者覆蓋前者。
比較z-index時，兄弟之間直接比較大小，非兄弟比較其祖先元素。

參考

07 CSS-相對定位、絕對定位、固定定位、z-index
CSS相對定位|絕對定位(五)之z-index篇
 深刻解析position屬性以及與層（z-index）的關系
 深入理解css中position屬性及z-index屬性

最后編輯于：2018.03.05 00:51:18

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 228,443評論 6贊 532
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,530評論 3贊 416
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 176,407評論 0贊 375
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,981評論 1贊 312
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,759評論 6贊 410
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,204評論 1贊 324
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,263評論 3贊 441
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,415評論 0贊 288
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,955評論 1贊 336
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,782評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,983評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,528評論 5贊 359
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,222評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,650評論 0贊 26
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,892評論 1贊 286
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,675評論 3贊 392
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,967評論 2贊 374

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

CSS入門11-定位與覆蓋

CSS入門11-定位與覆蓋

1. 簡介

2. 普通文檔流與脫離普通文檔流

3. 定位之間的覆蓋

3.1 相同定位之間的覆蓋

3.1.1 static與static

3.1.2 relative與relative

3.1.3 absolute之間（fixed與absolute只是定位的參考對象不一樣，但是覆蓋的優先級一樣，故在此將其合并為一個討論）

3.1.4 float之間的覆蓋

3.2 不同定位之間的覆蓋

3.2.1 static與relative

3.2.2 static與absolute

3.2.3 static與float

3.2.4 relative與absolute

3.2.5 relative與float

3.2.6 absolute與float

4. z-index

4.1 z-index對定位元素的作用

4.2 z-index對float的作用

5. 總結

參考

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

CSS入門11-定位與覆蓋

1. 簡介

2. 普通文檔流與脫離普通文檔流

3. 定位之間的覆蓋

3.1 相同定位之間的覆蓋

3.1.1 static與static

3.1.2 relative與relative

3.1.3 absolute之間（fixed與absolute只是定位的參考對象不一樣，但是覆蓋的優先級一樣，故在此將其合并為一個討論）

3.1.4 float之間的覆蓋

3.2 不同定位之間的覆蓋

3.2.1 static與relative

3.2.2 static與absolute

3.2.3 static與float

3.2.4 relative與absolute

3.2.5 relative與float

3.2.6 absolute與float

4. z-index

4.1 z-index對定位元素的作用

4.2 z-index對float的作用

5. 總結

參考

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频