欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

這篇文章主要介紹了如何解決css定位position引發(fā)的層級關(guān)系問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，專業(yè)領(lǐng)域包括成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、電商網(wǎng)站制作開發(fā)、小程序制作、微信營銷、系統(tǒng)平臺開發(fā)，與其他網(wǎng)站設(shè)計及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

position定位里的absolute，relative和fixed

  1. absolue：絕對定位，用top,bottom,left和right根據(jù)有定位的父級元素進行定位，如果無則相對body元素即整個頁面文檔進行定位。

  2. relative：相對定位，相對自己原來的位置進行定位

  3. fixed：絕對定位，相對瀏覽器窗口進行定位(fixed定位會讓元素一直處于瀏覽器某個位置，不會隨著滾動條滾動而變化)

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

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

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

  • z-index這個屬性僅定位元素才有

  • 有定位屬性的元素默認層級是0，如果層級一樣，則后面的元素居上，可以理解z-index:0+

  • absolute定位的元素會讓下面元素y軸向上移動，可以理解為absolute定位后該元素變成行級元素了

  • z-index的值越大,離我們觀察者越近，比如z-index:2在z-index:1 的上層

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

只有兄弟關(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上方

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

分析一下第二點

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

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

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

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

分析一下第三點

<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

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

分析一下第四點

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

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

如何解決css定位position引發(fā)的層級關(guā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層級關(guān)系，只有兄弟元素才有層級關(guān)系

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決css定位position引發(fā)的層級關(guān)系問題”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

分享文章：如何解決css定位position引發(fā)的層級關(guān)系問題
文章轉(zhuǎn)載：http://chinadenli.net/article34/jpsgse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、小程序開發(fā)、網(wǎng)頁設(shè)計公司、、網(wǎng)站改版、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司