1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > CSS——固定定位和Z-index值

CSS——固定定位和Z-index值

时间:2022-01-30 03:28:05

相关推荐

CSS——固定定位和Z-index值

固定定位

就是相对浏览器窗口定位,绝对定位的一种特殊形式。它以浏览器窗口作为参照物来定义网页元素,当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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。