定位流之z-index屬性
阿新 • • 發佈：2018-03-17
設置 meta 解決 開發 spa HA fixed eight charset
1.固定定位是脫離標準流的，不會占用標準流的空間
2.和絕對定位有點像，也不區分行內塊級元素
3.類似於前面學的背景關聯方式（讓某個背景圖片不隨滾動而滾動）讓某個元素不隨著滾動條的滾動而滾動
ie6不支持固定定位
定義：默認情況所以元素的z-index屬性是0;
作用是專門用於控制定位流元素的覆蓋關系的
默認情況下定位流的元素會蓋住標準流的元素
後面編寫的定位流會蓋住前面編寫的定位流元素
在企業開發中：可能不止一次用了定位流，而根據定位流的性質，很有可能後面的元素會蓋住前面的元素從而影響整個布局，為了解決這個問題，引入了z-index屬性，元素z-index屬性大的會覆蓋屬性小的元素
從父原則：當子元素的父元素有z-index屬性時，比較會看父元素的屬性而子元素設置的屬性就無效了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位流中的z-index屬性</title> <style> *{ margin: 0px; padding: 0px; } div{ width: 100px; height: 100px; } .box1{ background-color: yellow; position: relative; top: 50px; left: 50px; z-index: 3; } .box2{ background-color: red; position: absolute; top: 100px; left: 100px; z-index: 1; } .box3{ background-color: green; position: fixed; top: 150px; left: 150px; z-index: 2; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
定位流之z-index屬性