固定定位
就是相对浏览器窗口定位,绝对定位的一种特殊形式。它以浏览器窗口作为参照物来定义网页元素,当position属性取值为fixed时,即为固定定位。
当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。页面如何滚动,这个盒子显示的位置不变。
固定定位的元素跟父亲没有任何关系,只认浏览器,完全脱标,不占有位置,不随着滚动条滚动。
.backtop{position: fixed;width: 100px;height: 100px;background-color: gray;bottom: 100px;right: 30px;text-align: center;line-height: 30px;color: white;text-decoration: none;}</style></head><body><a href="" class="backtop">返回顶部</a><img src="images/wuyuetian.jpg" alt="" /><img src="images/wuyuetian.jpg" alt="" /><img src="images/wuyuetian.jpg" alt="" /><img src="images/wuyuetian.jpg" alt="" /></body>
返回顶部就是固定定位。
<style type="text/css">*{margin: 0;padding: 0;}.nav{position: fixed;top: 0;left: 0;width: 100%;height: 60px;background-color: #333;}</style></head><body><div class="nav"></div><img src="images/wuyuetian.jpg" alt="" /><img src="images/wuyuetian.jpg" alt="" /><img src="images/wuyuetian.jpg" alt="" /><img src="images/wuyuetian.jpg" alt="" /></body>
固定定位脱标。
IE6不兼容固定定位。
Z-index值
z-index值表示谁压着谁,数值大的压盖住数值小的。
z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。如果取值相同,则根据书写顺序后来居上。后面数字不能加单位。
只有定位了的元素才有z-index值。不管相对定位、绝对定位、固定定位都可以使用z-index值,浮动的东西不能使用。
如果大家都没有z-index值,或者z-index值都一样,那么谁写在html后面,谁在网页上能压盖住别人。定位了的元素永远能够压住没有定位的元素。
从父现象。
z-index没有单位。
z-index: 988;
<style type="text/css">*{margin: 0;padding: 0;}.box1{width: 200px;height: 200px;background-color: yellowgreen;}.box2{width: 200px;height: 200px;background-color: skyblue;}</style></head><body><div class="box1"></div><div class="box2"></div></body>
<style type="text/css">*{margin: 0;padding: 0;}.box1{width: 200px;height: 200px;background-color: yellowgreen;position: absolute;top: 100px;left: 100px;z-index: 999;}.box2{width: 200px;height: 200px;background-color: skyblue;position: absolute;top: 180px;left: 180px;z-index:555;}</style></head><body><div class="box1"></div><div class="box2"></div></body>