父子级z-index层级关系

最新推荐文章于 2024-06-05 16:36:04 发布

qq_27597497

最新推荐文章于 2024-06-05 16:36:04 发布

阅读量3.2k

点赞数 5

分类专栏： css 文章标签： z-index

本文链接：https://blog.csdn.net/qq_27597497/article/details/100522469

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.当父元素设置了z-index,无论子元素设多小都会浮在父元素上面

<div class="div1" style="width: 100px;height: 100px;background: #000; position: relative;z-index: 1;">1
	<div class="div2" style="position: relative;width:50px;height: 50px;background: #00e;z-index: -5;">2</div>
</div>

2.子元素z-index比父元素同级组件高，会浮在所有元素上面

<div style="width: 100px;height: 100px;background: #999; position: absolute;z-index: 2;">
1
    <div style="position: absolute;width:50px;height: 50px;background: #000;z-index:100;top: 50px;left: 10px;">2</div>
</div>
<div style="width: 80px;height: 80px;background: red;position: absolute;left: 30px;">
				3
    <div style="position: absolute;width:50px;height: 50px;background: #ddd;left: -23px;top: 70px; z-index:6;">4</div>
</div>

3.父元素z-index比同级元素低，无论子元素多高，都会在下面

<div style="width: 100px;height: 100px;background: #000; position: relative;z-index: 1;">1
	<div style="position: relative;width:50px;height: 50px;background: #00e;z-index:5;">2</div>
</div>
<div style="width: 80px;height: 80px;background: red;position: relative;z-index: 2;top: -100px;left: 30px;">3</div>

4.先比较父元素z-index大小，在根据子元素大小

div style="width: 100px;height: 100px;background: #999; position: absolute;z-index: 5;">
	1
	<div style="position: absolute;width:50px;height: 50px;background: #000;z-index:100;top: 50px;left: 10px;">2</div>
</div>
<div style="width: 80px;height: 80px;background: red;position: absolute;left: 30px;z-index: 10">
	3
	<div style="position: absolute;width:50px;height: 50px;background: #ddd;left: -23px;top: 70px; z-index:-10;">4</div>
</div