定位指的就是將指定的元素擺放到頁面的任意位置,通過定位可以任意的擺放元素, 通過position屬性來設定元素的定位
可選值:
static:預設值,元素沒有開啟定位
relative:開啟元素的相對定位
absolute:開啟元素的絕對定位
fixed:開啟元素的固定定位(也是絕對定位的一種)
1.當開啟了元素的相對定位以後,而不設定偏移量時,元素不會發生任何變化
2.相對定位是相對於元素在文件流中原來的位置進行定位
3.相對定位的元素不會脫離文件流
4.相對定位會使元素提公升乙個層級
5.相對定位不會改變元素的性質,塊還是塊,內聯還是內聯
當開啟了元素的定位(position屬性值是乙個非static的值)時,可以通過left right top bottom四個屬性來設定元素的偏移量
left:元素相對於其定位位置的左側偏移量
right:元素相對於其定位位置的右側偏移量
top:元素相對於其定位位置的上邊的偏移量
bottom:元素相對於其定位位置下邊的偏移量
通常偏移量只需要使用兩個就可以對乙個元素進行定位, 一般選擇水平方向的乙個偏移量和垂直方向的偏移量來為乙個元素進行定位
1.開啟絕對定位,會使元素脫離文件流
2.開啟絕對定位以後,如果不設定偏移量,則元素的位置不會發生變化
3.絕對定位是相對於離他最近的開啟了定位的祖先元素進行定位的(一般情況,開啟了子元素的絕對定位都會同時開啟父元素的相對定位)如果所有的祖先元素都沒有開啟定位,則會相對於瀏覽器視窗進行定位
4.絕對定位會使元素提公升乙個層級
5.絕對定位會改變元素的性質, 內聯元素變成塊元素,塊元素的寬度和高度預設都被內容撐開
固定定位也是一種絕對定位,它的大部分特點都和絕對定位一樣 ,不同的是:
固定定位永遠都會相對於瀏覽器視窗進行定位 ,固定定位會固定在瀏覽器視窗某個位置,不會隨滾動條滾動,ie6不支援固定定位
如果定位元素的層級是一樣,則下邊的元素會蓋住上邊的,通過z-index屬性可以用來設定元素的層級,可以為z-index指定乙個正整數作為值,該值將會作為當前元素的層級,層級越高,越優先顯示,對於沒有開啟定位的元素不能使用z-index
相對定位,絕對定位和固定定位
1.脫標,但是保留原來位置 下面的盒子上不來,也可以說是半脫標 2.偏移從以自己標準流中的位置為原點 1.完全脫標,不保留原來位置 2.父元素沒有定位的情況,子盒子以當前螢幕為基準點進行移動 3.父元素有定位 相對,固定,絕對 的情況,子盒子以父元素 有定位的最近祖元素 為基準點進行移動 body ...
相對定位,絕對定位和固定定位
相對定位 relative 是相對於自己原本的位置進行偏移,但他仍在標準文件流中,且偏移前的位置會被保留 html lang en id father id first 第乙個盒子 id second 第二個盒子 第三個盒子 效果如下 向右偏移 left 20 px 向上偏移 top 20px 效果...
相對定位 絕對定位 固定定位
設定position屬性值為static的元素是乙個靜態定位元素,此值為預設值,即此元素在正常文件流中。設定position屬性為relative的元素是乙個相對定位元素,其定位的參照物為元素本身 即元素原本的位置進行定位 例項 parent child style class parent cla...