部分ios fixed定位导致dom元素不显示是怎么导致的呢？
正常情况下如下图，点击按钮第二个蓝色色块显示。但在某些ios机型下点击按钮并不显示第二个色块。
具体定位方式为：
- body fixed定位，body下面有一个相对定位元素
- 相对定位元素内有两个dom，为 dom1, dom2，
- 每个dom都是绝对定位，切其内含有一个fixed定位元素content。
- 默认dom2显示，dom1隐藏，
- 由按钮控制dom1的显示，
此操作在部分ios下却失效，点击按钮dom1并不显示。
如果改变以下条件之一，都可以正常显示dom1:
- 去掉body的fixed定位（只要body不为absolute或fixed都可以）
- 改变dom1或者dom2的定位为fixed
- 把包裹dom1和dom2的div相对定位去掉
请教各路大神，怎么解释这个现象呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dom1 {
position: absolute;
}
.dom2 {
position: absolute;
}
.dom1 {
display: none;
}
.dom1_content {
position: fixed;
width: 150px;
height: 150px;
background-color: darkgreen;
top: 300px;
}
.dom2_content {
position: fixed;
width: 150px;
height: 150px;
background-color:darkmagenta;
top: 100px;
left: 0;
}
#btn{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div style="position: relative;">
<button id="btn">按1钮</button>
<div class="dom1">
<div class="dom1_content">
dom1_content
</div>
</div>
<div class="dom2">
<div class="dom2_content">
dom2_content
</div>
</div>
</div>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
document.querySelector('.dom1').style.display = 'block';
document.body.style.position = 'fixed';
})
</script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论