css定位position引發(fā)的層級(jí)關(guān)系問題詳解

發(fā)布時(shí)間：2020-02-10 16:30:25 作者：tangrl

這篇文章主要介紹了css定位position引發(fā)的層級(jí)關(guān)系問題詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

position定位里的absolute，relative和fixed

absolue：絕對(duì)定位，用top,bottom,left和right根據(jù)有定位的父級(jí)元素進(jìn)行定位，如果無則相對(duì)body元素即整個(gè)頁面文檔進(jìn)行定位。
relative：相對(duì)定位，相對(duì)自己原來的位置進(jìn)行定位
fixed：絕對(duì)定位，相對(duì)瀏覽器窗口進(jìn)行定位(fixed定位會(huì)讓元素一直處于瀏覽器某個(gè)位置，不會(huì)隨著滾動(dòng)條滾動(dòng)而變化)

由position引起的層級(jí)關(guān)系問題

首先我們要知道，css屬性其實(shí)是一個(gè)立體空間有x，y，z軸，但是只有我們使用了position定位時(shí)，z軸上的層級(jí)關(guān)系才體現(xiàn)出來，即z-index這個(gè)屬性僅定位元素才有。現(xiàn)在讓我們來分析這些層級(jí)關(guān)系吧。

層級(jí)關(guān)系如下：

z-index這個(gè)屬性僅定位元素才有
有定位屬性的元素默認(rèn)層級(jí)是0，如果層級(jí)一樣，則后面的元素居上，可以理解z-index:0+
absolute定位的元素會(huì)讓下面元素y軸向上移動(dòng)，可以理解為absolute定位后該元素變成行級(jí)元素了
z-index的值越大,離我們觀察者越近，比如z-index:2在z-index:1 的上層

只有兄弟關(guān)系的定位元素才能比較層級(jí)

下面讓我們來分析上面列出的幾點(diǎn)：

分析一下第一點(diǎn)

<style>
.c1{
    width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 0);
}
.c2{
    width: 200px;
    height: 100px;
    background-color: rgb(0, 0, 255);;
    position: absolute;
    top: 50px;

           }
</style>
<body> 
        <div class="c1">c1</div>
        <div class="c2">&nbsp&nbsp&nbsp&nbspc2</div>
</body>

此時(shí)c2的層級(jí)更高，應(yīng)該在疊在c1上方

分析一下第二點(diǎn)

<style type="text/css">
           .c1{
                width: 100px;
                height: 100px;
                background-color: rgb(255, 0, 0);
                position: relative;

           }
           .c2{
                width: 200px;
                height: 100px;
                backgr

此時(shí)定位元素都有層級(jí),后面的元素在上面

分析一下第三點(diǎn)

<style type="text/css">
         .c1{
                width: 100px;
                height: 100px;
                background-color: rgb(255, 0, 0);
                position: relative;

此時(shí)c3會(huì)直接覆蓋c2,因?yàn)閏2的定位是absolute，下面的元素會(huì)往c2處移動(dòng),由第二點(diǎn)可知，c3在c2的上面，故c3直接蓋住了c2

分析一下第四點(diǎn)

<style type="text/css">
           .c1{
                width: 100px;
                height: 100px;
                background-color: rgb(255, 0, 0);
                position: relative;

c1和c2都是定位元素，默認(rèn)z-index:0,將c1的z-index設(shè)置為1，這樣c1會(huì)在c2的上面

分析一下第五點(diǎn)

<style type="text/css">
           .c1{
                width: 100px;
                height: 100px;
                background-color: rgb(255, 0, 0);
                position: relative;

           }
           .c2{
                width: 200px;
                height: 100px;
                background-color: rgb(0, 0, 255);;
                position: absolute;
                z-index: 1;
           }
</style>
<body>
        <div class="c2">
            &nbsp&nbsp&nbsp&nbspc2
            <div class="c1">c1</div>
        </div>
</body>

把c1放在c2里面,即使把c2的z-index設(shè)為1,c1依舊在c2上面，說明嵌套元素?zé)o層級(jí)關(guān)系，只有兄弟元素才有層級(jí)關(guān)系