文檔流&浮動&定位

文檔流指元素在文檔中的位置由元素在html裏的位置決定，塊級元素獨佔一行，自上而下排列；內聯元素從左到右排列
脫離文檔流的方式：

• 浮動，經過設置float屬性
• 絕對定位，經過設置position:absolute
• 固定定位，經過設置position:fixed

 

定位

1  relative，relative元素框偏移某個距離。元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。它的主要效果是使元素偏離正常的位置，其餘元素不會調整位置來彌補其偏離後留下來的空隙。其與 absolute 不一樣，其偏離對於父元素的定位方式沒有要求，且始終佔位，不脫離文檔流

2 absolute ，絕對定位是脫離文檔流的，元素框從文檔流徹底刪除，並相對於其包含塊定位。包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框

絕對定位脫離了文檔流，因此會出現覆蓋狀況

absolute, relative, fixed偏移的參考點分別是什麼？

• absolute參考點是離其最近設置了fixed、relative的父級（祖先）元素，若是父級元素沒有，則一層一層往上找，最終到body元素
• relative的參考點是其原來自身的位置
• fixed的參考點是瀏覽器的窗口

Z-index

由於絕對定位與文檔流無關，因此絕對定位的元素能夠覆蓋頁面上的其餘元素，能夠經過z-index屬性控制疊放順序，z-index越高，元素位置越靠上。
z-index只有在使用了定位屬性即positon的元素上纔可以使用；有較高z-index值的元素比z-index值較低的元素離讀者更近；z-index值是正負整數

 

設置了z-index效果