z-index和position的关系
2015-12-30 17:39
483 查看
[原创]深刻解析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:父元素居下,子元素也可居上
定位方式相同(同为静态或非静态),无z-index时,html靠后者居上
(2)非同辈元素,任意兄弟及其父元素均为静态定位时,html靠后者居上
(3)非同辈元素,任意兄弟或其父元素有动态定位时【重要!!!】
先比较父元素,父元素z-index高者,其子元素居上(子元素设置无效)(如图4)
父元素居下,子元素也可以居上。(如图5)
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- css文本框与按钮美化效果代码
- 解决ie动态修改link样式,import css不刷新的问题