不使用 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:位于最底层
分享到:
相关推荐
.b{ position: absolute; z-index: 2; width: 0; height: 0; line-height: 0; font-size: 0; border-width: 5px; /*如果想改变倒三角形的大小,就改变这里的像素值*/ border-style: solid; border-color: #666 #fff ...
第三部分:relative定位 第四部分:absolute定位 第五部分:重叠的元素--z-index属性 第六部分:脱离档流导致的问题
#shadow {position:absolute;width:100%;height:100%;background:#CCCCCC;-moz-opacity:0.5;filter:Alpha(Opacity=50);opacity: 0.8;z-index:11;display:none;overflow:hidden;} #detail {width:500px;height:200px;...
最后将会介绍和position属性密切相关的z-index属性。 第一部分:position: static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响。 如...
部分css <style type="text/css"> <!-- html,body { height:100%; background:#fff; } body { font:12px "宋体",Arial,sans-serif; color:#333; } body,form,menu,dir,fieldset,blockquote,p,pre,ul,ol,dl,dd,h1,h2,...
background: url(css-face.gif) no-repeat; } #face li#face1 { background-position:-22px -5px; } #face li#face2 { background-position:-104px -5px; } #face li#face3 { background-position:-185px ...
stylelint-z-index-value-constraint 用于设置z索引的最小和最大约束值的Stylelint规则。 这是插件的分支。 安装 npm install stylelint-z-index-value-constraint --save-dev 或者 yarn add stylelint-z-index-...
代码片段: body{overflow:hidden;} /* ~~~~~~~ INIT. BTN ~~~~~~~ */ .btn { position: relative; padding: 1.4rem 4.2rem; padding-right: 3.1rem;...position: absolute;...z-index: -1; }
NULL 博文链接:https://rainbow702.iteye.com/blog/1703317
学习CSS网页制作:z-index在IE中的迷惑.pdf
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
百度到这里《小心 CSS3 Transform 引起的 z-index 失效》 “CSS3 Transform create new stacking context” 这个道理想想也明白,Transform 就是一个影子,假像,所以它不考虑z-index.那怎么解决呢? 再百度,以及去...
position:absolute; top:50px; left:50px; cursor:pointer; z-index:100; } #score { display:block; height:100px; width:100px; background:#EFEFEF; color:#ff6a00; font-family:Consolas; font-...
top:3px}#shouji{margin-right:14px}#u{display:none}#c-tips-container{display:none}.bdsug{position:absolute;width:418px;background:#fff;display:none;border:1px solid #817f82}.bdsug li{width:402px;color:...
css里的z-index的使用
NULL 博文链接:https://xiaomogu.iteye.com/blog/1311531
position:absolute; left:929px; top:10px; width:315; height:450; z-index:1; } #Layer2 { position:absolute; left:234px; top:96px; width:175px; height:300px; z-index:2; } #Layer3 { position:...
今天在看CSS的时候遇到了position: absolute、relative的问题,一直比较迷糊,今天终于搞清楚了。
position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-...
div.container{position:absolute; top:30px; left:40px; font-size: 9pt; display:block; height:100px; width:200px; background-color:transparent; *border:1px solid #666; } s{ position:absolute; top:-20px;...