css z-index属性的适用范围

最新推荐文章于 2022-08-26 11:46:58 发布

bdawn

最新推荐文章于 2022-08-26 11:46:58 发布

阅读量651

点赞数 1

分类专栏： css 文章标签： css z-index z-index不生效 position display flex

本文链接：https://blog.csdn.net/BDawn/article/details/119848433

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

z-index属性的适用范围

z-index属性使用在下面两种html元素中才会生效

position属性设置为除static的其他属性值的元素
display设置为flex的子元素

设置`position`的情况

不设置position

<style>
	.green{
		width: 50px;
		height: 50px;
		z-index: 2;
		background: green;
	}
	.blue{
		width: 100px;
		height: 50px;
		margin-top: -20px;
		background:  blue;
		z-index: 0;
	}
</style>
<body>
	<div class="green"></div>
	<div class="blue"></div>
</body>

在这里插入图片描述

设置position

<style>
	.green{
		width: 50px;
		height: 50px;
		z-index: 2;
		background: green;
		position: relative;
	}
	.blue{
		width: 100px;
		height: 50px;
		margin-top: -20px;
		background:  blue;
		z-index: 0;
		position: relative;
	}
</style>
<body>
	<div class="green"></div>
	<div class="blue"></div>
</body>

在这里插入图片描述

父元素设置了`display: flex`

父元素不设置display: flex

<style>
	.flex{
		width: 200px;
		height: 200px;
		background: gray;
	}
	
	.green-child{
		width: 50px;
		height: 50px;
		z-index: 1;
		background: green;
	}
	.blue-child{
		width: 100px;
		height: 50px;
		margin-top: -20px;
		background:  blue;
		z-index: 0;
		position: relative;
	}
</style>
<body>
	<div class="flex">
		<div class="green-child"></div>
		<div class="blue-child"></div>
	</div>
</body>

在这里插入图片描述
父元素设置display: flex

<style>
	.flex{
		width: 200px;
		height: 200px;
		background: gray;
		display: flex;
		flex-direction: column
	}
	
	.green-child{
		width: 50px;
		height: 50px;
		z-index: 1;
		background: green;
	}
	.blue-child{
		width: 100px;
		height: 50px;
		margin-top: -20px;
		background:  blue;
		z-index: 0;
		position: relative;
	}
</style>
<body>
	<div class="flex">
		<div class="green-child"></div>
		<div class="blue-child"></div>
	</div>
</body>

在这里插入图片描述

bdawn

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css z-index属性的适用范围

z-index属性的适用范围z-index属性使用在下面两种html元素中才会生效position属性设置为除static的其他属性值的元素display设置为flex的子元素设置position的情况不设置position<style> .green{ width: 50px; height: 50px; z-index: 2; background: green; } .blue{ width: 100px; height: 50px; ma
复制链接

扫一扫