z-index失效原因

最新推荐文章于 2023-10-13 15:02:26 发布

 The dream is near  

最新推荐文章于 2023-10-13 15:02:26 发布

阅读量145

点赞数

分类专栏：前端实践文章标签：前端 z-index

本文链接：https://blog.csdn.net/weixin_44988028/article/details/100124901

版权

11 篇文章 1 订阅

订阅专栏

1、body内有其他div的z-index比当前div的大。
2、z-index没有配合position使用
举例：实现全屏半黑状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="blackground"></div>
	</body>
</html>

加定位前：

.blackground{
    position: fixed;
    background: rgba(0,0,0,0.59);
    width:100%;
    height:100%;
    z-index: 1000;
}

并无变化
加定位后：

.blackground{
    position: fixed;
    background: rgba(0,0,0,0.59);
    width:100%;
    height:100%;
    top:0;
    bottom: 0;
    z-index: 1000;
}

字体被覆盖

优惠劵

关注关注