對CSS中幾種定位的認識

1、靜態定位(static)

left、right、top、bottom、z-index等屬性無效。

2、絕對定位(absolute)

將被賦予絕對定位的元素從文檔流中拖出,使用left、right、top、bottom等屬性相對於其最接近的一個最有定位設置的父級元素進行絕對定位,如果元素的父級沒有設置定位屬性,則依據 body 元素左上角作爲參考進行定位。絕對定位元素可層疊,層疊順序可通過 z-index 屬性控制,z-index值爲無單位的整數,大的在上面,可以有負值。

絕對定位的定位方法:如果它的父元素設置了除static之外的定位,比如position:relative或position:absolute及position:fixed,那麼它就會相對於它的父元素來定位,位置通過left , top ,right ,bottom屬性來規定,如果它的父元素沒有設置定位,那麼就得看它父元素的父元素是否有設置定位,如果還是沒有就繼續向更高層的祖先元素類推,總之它的定位就是相對於設置了除static定位之外的定位的第一個祖先元素,如果所有的祖先元素都沒有以上三種定位中的其中一種定位,那麼它就會相對於文檔body來定位(並非相對於瀏覽器窗口,相對於窗口定位的是fixed)。

    <head>  
        <style type="text/css">  
            .box {  
                background: red;  
                width: 100px;  
                height: 100px;  
                float: left;  
                margin: 5px;  
            }  
            #two {  
                position: absolute;  
                top: 50px;  
                left: 50px;  
            }  
        </style>  
    </head>  
    <body>  
        <div class="box" id="one">One</div>  
        <div class="box" id="two">Two</div>  
        <div class="box" id="three">Three</div>  
        <div class="box" id="four">Four</div>  
    </body>  

將id="two"的div定位到距離<body>的頂部和左側分別50px的位置。會改變其他元素的佈局,不會在此元素本來位置留下空白。



3、相對定位(relative)

相對定位元素不可層疊,依據left、right、top、bottom等屬性在正常文檔流中偏移自身位置。同樣可以用z-index分層設計。

    <head>  
        <style type="text/css">  
            .box {  
                background: red;  
                width: 100px;  
                height: 100px;  
                float: left;  
                margin: 5px;  
            }  
            #two {  
                position: relative;  
                top: 50px;  
                left: 50px;  
            }  
        </style>  
    </head>  
    <body>  
        <div class="box" id="one">One</div>  
        <div class="box" id="two">Two</div>  
        <div class="box" id="three">Three</div>  
        <div class="box" id="four">Four</div>  
    </body>  


將id="two"的div定位到距離它本來位置的頂部和左側分別50px的位置。不會改變其他元素的佈局,會在此元素本來位置留下空白。



4、固定定位(fixed)

固定定位與絕對定位類似,但它是相對於瀏覽器窗口定位,並且不會隨着滾動條進行滾動。

固定定位的最常見的一種用途是在頁面中創建一個固定頭部、固定腳部或者固定側邊欄,不需使用margin、border、padding。


5、絕對定位vs相對定位

絕對定位好像把不同元素安排到了一棟樓的不同樓層(除首層,文本流放在首層),它們之間互不影響;相對定位元素在首層,與文本流一起存放,它們之間互相影響。

被設置了絕對定位的元素,在文檔流中是不佔據空間的,如果某元素設置了絕對定位,那麼它在文檔流中的位置會被刪除,它浮了起來,其實設置了相對定位也會讓元素浮起來,但它們的不同點在於,相對定位不會刪除它本身在文檔流中佔據的空間,其他元素不可以佔據該空間,而絕對定位則會刪除掉該元素在文檔流中的位置,使其完全從文檔流中抽了出來,其他元素可以佔據其空間,可以通過z-index來設置它們的堆疊順序 。


絕對定位的元素脫離了標準文檔,即“脫標”

“子絕父相”指絕對定位是相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。

設置父元素相對定位,子元素絕對定位,那麼子元素就是相對於這個父元素的位置來定位的。



<!--以上知識整理過程中有借鑑CSDN用戶 筱葭、Bird 的博客-->

發佈了45 篇原創文章 · 獲贊 31 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章