一、固定定位應用場景 1.練習 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D158_ExerciseOfLocation</title> <style> *{ padding:0; margin:0; ...
一、固定定位應用場景
1.練習
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D158_ExerciseOfLocation</title> <style> *{ padding:0; margin:0; } .nav{ width: 100%; height: 45px; background-color: red; background:url("image/play_tennis.jpg"); position:fixed;/*複習了固定定位，這個導航條就會固定到瀏覽器中不會隨網頁滾動而滾動了，兵器也脫脫離的標準流*/ } .content{ width: 100%; height: 2500px; background-color: yellow; background:url("image/laptop.jpg"); } .backup{ width: 50px; /*height: 50px;*/ background-color: red; position:fixed; right: 10px; bottom:10px; text-align: center; text-decoration: none;/*去掉下麵的線*/ line-height: 50px;/*行高可以撐起盒子的高度*/ } </style> </head> <body> <div class="nav"></div> <div class="content"></div> <div class="backup"><a href="#">返回</a></div> </body> </html>
註意：IE6不支持固定定位，谷歌瀏覽器支持。
二、定位流-z-index屬性
1.什麼是z-index屬性？
預設情況下所有的元素都一個預設的z-index屬性，取值為0，z-index屬性的作用是準們用於控制定位流元素的覆蓋關係的
2.預設情況下定位流的元素會蓋住標準流的元素。
3.預設情況下定位流的元素後面編寫的會蓋住前面編寫的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D159_z-indexAttribute</title> <style> *{ padding:0px; margin:0px; } div{ width: 100px; height: 100px; } .box1{ background-color: red; position:fixed; } .box2{ background-color: yellow; /*position:relative;*/ } .box3{ background-color: blue; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
釋義：紅色的塊蓋住了黃色的塊，原因符合第2條
.box2{
background-color: yellow;
position:relative;
}
釋義：黃色的塊蓋住了紅色的塊，原因符合第三條
4.使用z-index屬性來規定這個標簽的優先順序。如果定位流的元素設置了z-index屬性，那麼誰的z-index屬性比較大，誰就顯示在上面。
.box1{
background-color: red;
position:fixed;
z-index: 1;
}
.box2{
background-color: yellow;
position:relative;
}
釋義：這樣就打破那個規則了，可以自動義進行排序。
註意點：
從父元素入手：
（1）如果兩個元素的父元素都沒有設置z-index，那麼誰的z-index屬性比較大的誰就顯示在上面；
（2）如果兩個元素的父元素都設置了z-index屬性，那麼誰的父元素z-index屬性比較大，那麼誰就顯示在上面。子元素的z-index就失效了。
三、源碼：
D158_ExerciseOfLocation.html
D159_z-indexAttribute.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D158_ExerciseOfLocation.html
https://github.com/ruigege66/HTML_learning/blob/master/D159_z-indexAttribute.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號：傅里葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大數據學習視頻禮包
