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

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

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

position定位里的absolute，relative和fixed

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

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

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

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

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

只有兄弟關(guā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>

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

分析一下第二點

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

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

此時定位元素都有層級,后面的元素在上面

分析一下第三點

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

此時c3會直接覆蓋c2,因為c2的定位是absolute，下面的元素會往c2處移動,由第二點可知，c3在c2的上面，故c3直接蓋住了c2

分析一下第四點

<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會在c2的上面

分析一下第五點

<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層級關(guān)系，只有兄弟元素才有層級關(guān)系