解决弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕的问题

最新推荐文章于 2022-11-01 16:13:56 发布

原创最新推荐文章于 2022-11-01 16:13:56 发布 · 1w 阅读

8 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种遮罩层在页面滚动时无法完全遮挡背景的问题及其解决方案。通过将遮罩层的定位方式从绝对定位（absolute）改为固定定位（fixed），确保了无论怎样滚动页面，遮罩层都能始终覆盖整个屏幕。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做项目时，用到了弹出框，下边要有一层遮罩。写了一个简单的遮罩，拉动滚动条后发现，遮罩层只是遮住了视口，下面看不到根本没遮住，后来经过度娘后才有了解决方法。

有问题的遮罩层代码

.modal .modal-shadow {
	opacity: 0.3;
	filter: alpha(opacity=30);
	background-color: gray;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}

解决问题后的遮罩层代码，其实只要把absolute换成fixed即可。

.modal .modal-shadow {
	opacity: 0.3;
	filter: alpha(opacity=30);
	background-color: gray;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}