部分ios fixed定位导致dom元素不显示是怎么导致的呢?

saysmy
  • 16

正常情况下如下图,点击按钮第二个蓝色色块显示。但在某些ios机型下点击按钮并不显示第二个色块。

image.png

具体定位方式为:

  1. body fixed定位,body下面有一个相对定位元素
  2. 相对定位元素内有两个dom,为 dom1, dom2,
  3. 每个dom都是绝对定位,切其内含有一个fixed定位元素content。
  4. 默认dom2显示,dom1隐藏,
  5. 由按钮控制dom1的显示,

此操作在部分ios下却失效,点击按钮dom1并不显示。

如果改变以下条件之一,都可以正常显示dom1:

  1. 去掉body的fixed定位(只要body不为absolute或fixed都可以)
  2. 改变dom1或者dom2的定位为fixed
  3. 把包裹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>
回复
阅读 1.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏