1. 程式人生 > 其它 >0_4 CSS定位、層級

0_4 CSS定位、層級

1.定位,

一種更高階的佈局手段,可以通過定位把元素擺放在頁面的任意位置

使用position屬性設定定位

1.1  position可選值:

static   預設值

relative  相對定位,參考元素在文件流中的位置,提升層級,不脫離文件流,不改變元素性質(塊、行內)

absolute  絕對定位,參考元素在包含塊(開啟定位的祖先元素||根元素),提升層級,改變元素性質

fixed  固定定位,一種絕對定位,但是參考瀏覽器的視口

sticky  粘滯定位,和相對定位特點基本一致,但是設定的是--元素到達某個位置時將其固定

1.2 定位的偏移量

  元素開啟定位以後,通過偏移量設定元素位置

top  定位元素和參考元素上邊的距離

bottom  ......

left  ......

right  ......

2、元素的層級  z-index

開啟了定位的元素,通過設定z-index指定層級,層級越高越優先顯示

層級一樣則優先顯示靠下的元素,

祖先元素層級再高也不會蓋住後代元素