一、固定定位应用场景
1.练习
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>d158_exercioflocation</title> <style> *{ padding:0; margin:0; } .nav{ width: 100%; height: 45px; background-color: red; bv代表什么意思ackground: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-al中芭艺蕾ign: 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 chart="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-i犀牛角ndex属性,那么谁的父元素z-index属性比较大,那么谁就显示在上面。子元素的z-index就失效了。
三、源码:
d158_exercioflocation.html
d159_z-indexattribute.html
地址:
https://github.com/ruigege66/html_learning/blob/master/d158_exercioflocation.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大数据学习视频礼包
本文发布于:2023-04-07 08:12:40,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/f59520e8489d5a5c464ec1613139a2c7.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:HTML连载62.doc
本文 PDF 下载地址:HTML连载62.pdf
留言与评论(共有 0 条评论) |