移动端的绝世之坑1（求大神解答）

最新推荐文章于 2020-06-29 09:56:13 发布

code_life666

最新推荐文章于 2020-06-29 09:56:13 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

分类专栏：绝世之坑文章标签：绝对定位堆叠次序移动端 css溢出前端开发

本文链接：https://blog.youkuaiyun.com/code_life666/article/details/81977472

绝世之坑专栏收录该内容

1 篇文章

订阅专栏

无论怎么设置其堆叠次序，绝对定位的元素都无法盖住和自己平行的一个元素。直接上代码和效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="user-scalable=no"/>

		<style>
			body{margin:0;position:fixed;transform:rotate(90deg);width:100vh;height:100vw;transform-origin:50vw 50%;}
			#container{overflow:hidden;position:relative;}
			#content{height:330px;}
			#ele_cont{height:220px;overflow:scroll;}
			#ele{height:221px;background:#ddf;}
			#mask{width:100%;height:100%;top:0;left:0;background: #afa;position:absolute;}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="ele_cont">
				<div id="ele"></div>
			</div>
			<div id="mask"></div>
		</div>
	</body>
</html>

我给#ele_cont的overflow设置的是scroll，总感觉和这个有点关系。多次尝试后发现，这件事发生的必要条件是：

1、#ele_cont要溢出

2、#container的overflow必须是hidden或scroll

3、body必须是旋转90度，其他任何角度均无效

4、必须在移动端调试看，PC端无效

后来，我又怀疑，#ele_cont溢出使里面的#ele的堆叠次序上升了，于是降低其堆叠次序，发现也产生效果了。直接上代码和效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="user-scalable=no"/>

		<style>
			body{margin:0;position:fixed;transform:rotate(90deg);width:100vh;height:100vw;transform-origin:50vw 50%;}
			#container{overflow:hidden;position:relative;}
			#content{height:330px;}
			#ele_cont{height:220px;overflow:scroll;}
			#ele{height:221px;background:#ddf;z-index:-1;position:relative;}
			#mask{width:100%;height:100%;top:0;left:0;background: #afa;position:absolute;}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="ele_cont">
				<div id="ele"></div>
			</div>
			<div id="mask"></div>
		</div>
	</body>
</html>