CSS 中 position:absolute 与 z-index 对层次结构影响
来源:互联网 发布:手机p文件软件 编辑:程序博客网 时间:2024/05/16 05:33
1. 不使用 position 这种情况下每一层都遵循 HTML 定位规则,其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现. 2. 使用 absolute 如两个绝对定位对象的 z-index 属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠. 2.1 未使用 z-index 这种情况下,依据它们在HTML文档中声明的顺序层叠,因为 z-index 在未设置的情况下,默认为 0 . <div id = "001" style="top:10; left:30; width:100px ;height:50px; border:1px solid #999; background:green; position:absolute;">001</div> <div id = "002" style="top:40; left:40; width:100px ;height:50px; border:1px solid #999; background:red; position:absolute;">002</div> <div id = "003" style="top:80; left:50; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;">003</div> 001:位于最底层 002:位于中间层 003:位于最高层 2.2 使用 z-index z-index 为无单位的整数值,可为负数.按照数值的大小排列,数值越大,越在外层. <div id = "001" style="top:10; left:30; width:100px ;height:50px; border:1px solid #999; background:green; position:absolute ;">001</div> <div id = "002" style="top:30; left:40; width:100px ;height:50px; border:1px solid #999; background:red; position:absolute;z-index:1;" >002</div> <div id = "003" style="top:50; left:20; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:-1;">003</div> 001:位于中间层 002:位于最高层 003:位于最底层 2.3 父子元素 对于父子元素,子元素的从属于父元素的层次,子元素在父层的上面 <div id = "001" style="width:100px ;height:50px; border:1px solid #999; background:green; position:absolute;z-index:1">001 <div id = "002" style="top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:red;position:absolute;z-index:-1" >002</div> </div> <div id = "003" style="top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:0" >003</div> 001:位于中间层 002:位于最高层 003:位于最底层 3. 混合使用 absolute 对于没有设置 position:absolute 属性的元素 不管 z-index 设置多少都为 0, 但低于 position:absolute 中 z-index:0 的元素 <div id = "001" style="top:30; left:30; width:100px ;height:50px; border:1px solid #999; background:green; position:absolute;">001</div> <div id = "002" style="top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:red;z-index:1" >002</div> <div id = "003" style="top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:-1" >003</div> 001:位于最高层 002:位于中间层 003:位于最底层
0 0
- CSS 中 position:absolute 与 z-index 对层次结构影响
- CSS 中 position:absolute 与 z-index 对层次结构影响
- CSS 中 position:absolute 与 z-index 对层次结构影响
- CSS 中 position:absolute 与 z-index 对层次结构影响
- CSS 中 position:absolute 与 z-index 对层次结构影响
- CSS 中 position:absolute 与 z-index 对层次结构影响
- CSS 中 position:absolute 与 z-index 对层次结构影响
- CSS 中 position:absolute 与 z-index 对层次结构影响
- css中z-index与position
- css中z-index与position属性的巧妙应用
- CSS 定位(position 与 z-index)
- position:relative/absolute/IE6/z-index失效
- css 中使用 z-index + absolute控制层的堆叠
- css:position 与 z-index 问题(1)
- css: position 与 z-index 问题(2)
- 深入理解css中position属性及z-index属性
- relative、position与z-index
- position中z-index问题
- ORA-12520 TNS:Listener count not find available handler for requested type of server错误解决办法
- std::auto_ptr的使用方法
- 利用 MDK的RTE(run-time environment)功能添加自己的pack
- 模拟新浪微博随便看看栏目
- MyBatis Generator generatorConfig.xml配置详解
- CSS 中 position:absolute 与 z-index 对层次结构影响
- mysql双主配置
- iOS6新特征:UICollectionView介绍
- 欢迎使用CSDN-markdown编辑器
- python 手动收集内存垃圾
- 2015高职院校移动互联网应用软件开发赛准备小结
- 用Margin还是用Padding
- .Net多线程总结
- Java仿照JavaScript的JSON的stringify()方法重写toString()方法的启示