z-index和position的关系
来源:互联网 发布:html表白源码 编辑:程序博客网 时间:2024/05/04 06:02
[原创]深刻解析position属性以及与层(z-index)的关系
1、问题的抛出:
<ul>
<li>第一块</li>
<li><span>第二块</span></li>
<li>第三块</li>
</ul>
li{width:100px; height:100px;background:Black;float:left; position:relative; z-index:1;}
li span{width:200px;height:100px;background:Red; position:absolute; top:0; left:100px; z-index:1000;}
2、问题:(1)无论span的z-index值设得多高,span永远在li的下面
(2)将span的父元素li的z-index:2,则span马上在li的上面
3、解析:
position的4种属性:static静态定位,默认值
relative、absolute、position非静态定位
(A)absolute时,不占据空间,可实现漂浮效果
relative时,占据空间,即使使用left|top、margin进行移位,其原有空间始终被占有
(B)当前元素position:absolute,当其父元素为relative时,其定位是相对于父元素定位;
当前元素position:absolute,当其父元素不为relative时,其定位是相对于窗口定位;
(C)层的关系如下:(1)兄弟元素:动态>z-index>html靠后(优先级)
定位方式不同,动态居上(图一);
定位方式相同(同为静态或非静态),z-index大者居上;
图1:动态居上 图2:z-index大者居上 图3:同方式和z-index,html靠后者居上
图4:父元素居上,子元素设置无效 图5:父元素居下,子元素也可居上
(2)非同辈元素,任意兄弟及其父元素均为静态定位时,html靠后者居上
(3)非同辈元素,任意兄弟或其父元素有动态定位时【重要!!!】
先比较父元素,父元素z-index高者,其子元素居上(子元素设置无效)(如图4)
父元素居下,子元素也可以居上。(如图5)
- z-index和position的关系
- position和z-index的关系整理【转载】
- Position 与 z-Index 的关系
- CSS中的position和z-index属性
- position与z-index的组合
- position、opacity与z-index的组合
- 深刻解析position属性以及与层(z-index)的关系
- position 属性和 z-index 属性对页面节点层级影响的例子
- CSS入门(8)-position和 z-index属性
- 分析css中的position属性和z-index属性
- 父子级间的z-index关系
- 父子级间的z-index关系
- position中z-index问题
- relative、position与z-index
- about position and z-index
- css中z-index与position属性的巧妙应用
- IE7下position的z-index Bug解决方案
- 元素重叠及position定位的z-index顺序
- IBatis.Net 日志 http://www.cnblogs.com/firstyi/archive/2007/08/22/865028.html
- 扩展 easyui-tabs 插件 关闭标签页方法
- ig.input.unbindAll();
- Spring @PathVariable
- BP算法——别跟我说看完这个你还不懂
- z-index和position的关系
- GO语言异常处理机制panic和recover分析
- springMVC框架
- 第十一周 线索化二叉树(中序)
- dp和px转换
- xcode7代码自动排版(格式化)
- jquery easyui设置COMBOX高度,COMBOX初始化
- 你还在重复的findViewById么?
- 树形菜单 的mysql 存储过程实现增删查