首页 » CSS » CSS 中 position:absolute 与 z-index 对层次结构影响

CSS 中 position:absolute 与 z-index 对层次结构影响

原文 http://blog.csdn.net/qq_23392341/article/details/79131422

2018-01-23 02:00:16阅读(201)

http://blog.sina.com.cn/s/blog_757991900100tnqn.html

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">001</div>
<div id = "002">002</div>
<div id = "003">003</div>

001:位于最底层
002:位于中间层
003:位于最高层

2.2 使用 z-index

z-index 为无单位的整数值,可为负数.按照数值的大小排列,数值越大,越在外层. 
 <div id = "001">001</div>
 <div id = "002" >002</div>
 <div id = "003">003</div>

001:位于中间层
002:位于最高层
003:位于最底层

2.3 父子元素

对于父子元素,子元素的从属于父元素的层次,子元素在父层的上面

 <div id = "001">001
    <div id = "002" >002</div>
 </div>
 <div id = "003" >003</div>

001:位于中间层
002:位于最高层
003:位于最底层

3、混合使用 absolute

 对于没有设置 position:absolute 属性的元素 不管 z-index 设置多少都为 0, 但低于 position:absolute 中 z-index:0 的元素 
<div id = "001">001</div>
<div id = "002" >002</div>
<div id = "003" >003</div>

001:位于最高层
002:位于中间层
003:位于最底层

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹