如何在css中使用z-index让子标签在父标签的兄弟标签之上

html-css09

如何在css中使用z-index让子标签在父标签的兄弟标签之上,第1张

把有IMG子标签的的父标签的z-index值设置大于另外一个父标签，这样img就能看到了。自标签的z-index是建立在父标签的基础上的，加入A元素的z-index值低于B元素的，那么A元素下面的子元素的层级也同样都低于B元素里的子元素，即使你将A元素里的子元素设为z-index:9999；同理元素B里的子元素，即使是设的z-index:1它照样比元素A的层级要高；

另外，设置了z-index属性，需要对div标签设置定位才能生效，不管是绝对定位还是相对定位。

父元素的z-index值比子元素大，子元素就在父元素的下面，z-index值大会在上层，示例代码如下:

html部分：

<div id="container">

<div id="a1">a1在上面</div>

</div>

<div id="a2">a2在下边</div>

2.css部分：

#container { position: relative }

#a1 { position: absolute top: 100px left: 210px width: 200px height: 200px background-color: yellow z-index: 20 }

#a2 { position: absolute top: 50px left: 160px width: 200px height: 200px background-color: green z-index: 10 }

说明：两个a被完全的定位，背景色为黄色的a1拥有z-index属性值20，而背景色为绿色的a2拥有z-index属性值10，唯一的区别在于背景色为黄色的a1被放在了一个定义了属性position:relative的div中，并且在文档源代码中位前。

3.效果图如下：

注意事项：z-index只能在定位中起作用。

当网页上出现多个由绝对定位（POSITION:absolute）或固定定位（POSITION:fixed）所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置z-index的值来解决，这个值较大的就在上面，较小的在下面。

z-index的意思就是在z轴的顺序，如果说网页是由x轴和y轴所决定的一个平面，那么z轴就是垂直于屏幕的一条虚拟坐标轴，浮动层就在这个坐标轴上，那么它们的顺序号就决定了谁上谁下了。