首頁  >  文章  >  web前端  >  詳解css z-index的權重問題

詳解css z-index的權重問題

青灯夜游
青灯夜游轉載
2021-02-13 09:34:352709瀏覽

詳解css z-index的權重問題

這篇文章跟大家分享一下css的z-index權重問題。到底怎麼樣才能讓我們想要排在上面的元素能在上面,想在下面的元素就老老實實的在下面。

一、一起看下面實戰中z-index的幾種情況:

  • 一個定義了定位,一個沒定義定位,誰在上面?

  • 一個父級盒子定位,一個不定位,不定位的子級設定定位,誰在上面?

  • 一個父級盒子定位,一個不定位,不定位的子級設定定位,並給定位的子級元素加上z-index,誰在上面?

  • 兩個都定位,但都不設定z-index,誰在上面?

  • 兩個都定位,一個設定z-index為1,誰在上面?

二、設定基本的dom結構與樣式,準備測試

定義一下基本的dom結構:

詳解css z-index的權重問題

#
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {margin: 0;padding: 0;}
        .box1, .box2 {
            width: 500px;
            height: 200px;
            border: 2px solid;
            margin: 10px;
        }
        .box1 {
            background: yellow;
        }
        .box2 {
            background: aqua;
        }
        .redDiv, .blueDiv {
            width: 150px;
            height: 150px;
        }
        .redDiv {
            background: red;
        }
        .blueDiv {
            background: blue;
        }
    </style>
</head>
<body>
    <div>
        <div></div>
    </div>
    <div>
        <div></div>
    </div>
</body>
</html>

三、開始測試

測試問題1:

一個定義了定位,一個沒定義定位,誰在上面?

我們給box2設定定位並改變它的位置

.box2 {
   background: aqua;
   position: fixed;
   left: 100px;
   top: 30px;
}

效果:

box2跑到了box1的上面。

詳解css z-index的權重問題

測試問題2:

一個父級盒子定位,一個不定位,不定位的子級設定定位,誰在上面?

我們給box1盒子裡的redp設定定位

.redp {
   background: red;
   position: fixed;
   }

效果:

box2還是在box1的上面。也在box1的定位子元素上面。

詳解css z-index的權重問題

測試問題3:

一個父級盒子定位,一個不定位,不定位的子級設定定位,並給定位的子級元素加z-index,誰在上面?

我們給box1盒子裡的redp追加z-index

.redp {
   background: red;
   position: fixed;
   z-index: 1;
   }

效果:
redp在最上面,box2在中間,box1在最下面。

詳解css z-index的權重問題

測試問題4:

兩個都定位,但都不設定z-index,誰在上面?

我們先恢復我們初始的樣式程式碼然後重新改變。
在初始的程式碼裡更改box1與box2的樣式

.box1 {
    background: yellow;
    position: fixed;}.box2 {
    background: aqua;
    position: fixed;
    left: 100px;
    top: 30px;}

效果:
box2在box1的上面
詳解css z-index的權重問題

##測試問題5:

兩個都定位,一個設定z-index為1,誰在上面?

我們吧box1的z-index設定為1:

.box1 {
    background: yellow;
    position: fixed;
    z-index: 1;}
效果:

box1跑到了box2的上面

詳解css z-index的權重問題

四、結論

    定位的元素在沒定位的元素上面
  • 同樣定位了後面的元素在前面的元素上面
  • #同級的父級都定位了【就不看子級了】,誰的z-index高誰在上面
  • 一個父級定位了,另一個父級沒定位,沒定位的元素的子級定位了,那就按照定位的子級和定位的父級看誰的z-index高誰在上面。
更多程式相關知識,請造訪:

程式設計教學! !

以上是詳解css z-index的權重問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除