css定位屬性共有三種:
1.相對定位 relative
2.絕對定位 adsolute
3.固定定位 fixed
相對定位:
相對與自己原來的位置定位,進行位置的調整。
一:
1.盒子和盒子的距離,間隙。相對定位:位置的調整
2.margin會影響後面的元素。相對定位不會影響別人。
不脫標。坑位還佔著,別人擠不走。
做絕對定位的參考,子絕父相。)
<1>絕對定位:
找乙個參考係,定義橫縱座標。預設是在父容器或者瀏覽器的左上角或左下角。橫座標用left,right 縱座標用top和botto。
一:
二:
乙個絕對定位的元素,如果祖先元素**現了已定位的元素,那麼將以該元素為參考點。
1.以最近的已經定位的祖先元素,不一定是父容器,也可以是爺爺。
2.不一定是相對對位,任何定位資訊,都可以做子容器的參考點。
3.使用最多的子絕父相。
4.以父容器的border內側點為參考點,進行定位。
應用:1.壓蓋效果,乙個div壓在另乙個div上面。
2.絕對定位的盒子居中。 left:50%;margin-left: -自身寬度的一半。
<2>固定定位:
相對瀏覽器進行定位,無論頁面怎麼滾動, 這個盒子顯示的位置不變。
用途:1.網頁返回頂部,側邊廣告。
2.頂部固定導航條
一:
二:
z-index 屬性 是定位元素專用的。 屬性值是數字,數值大的會壓蓋住數值小的。
z-index都沒有值或值相同的時候,寫在後面的盒子會蓋住前面的盒子。
數值大的會蓋住數值小的,z-index是乙個自然數,預設為0.
從父現象:大家都有z-index的值的時候,會比較父容器的z-index,如果父1比父2大,就算兒子2比兒子1大,兒子1也能壓住兒子2。
一:
css定位總結
塊狀元素 display block可以作為其它元素的容器,排斥其它元素和他在一行 寬 width 高 height 值都是有作用的 內聯元素 內容屬性 內容本身的寬 width 內容本身的長 height margin 20px 0 0 2px 0表示不設定 因為瀏覽器的margin paddin...
CSS 定位總結
css 有三種基本的定位機制 普通流 浮動和絕對定位,但本篇文章要總結的是css中的position屬性,position有四個值,static,absolute,relative,fixed。生成相對定位的元素,相對於其正常位置進行定位,它原本佔據的空間流仍然存在。當使用left top righ...
CSS定位總結
定位相關總結 1 文件流 就是html的布局機制。塊元素 block 獨佔一行,內聯元素 line 不獨佔一行。2 相對定位 就是相對於乙個東西定位。這個東西就是它本身,同時可以使用left top bottom right 來移動元素的位置。注意 相對定位不會脫離文件流。3 絕對定位 找乙個東西相...