关于CSS定位的一点疑问

<body>
    <header>
        
    </header>
    
    <main>
        <div class="content">
            <div class="popup"></div>
        </div>
    </main>
    
    <footer>
    </footer>
</body>

header, footer, main {
    display: block;
}

header {
    position: fixed;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
}

footer {
    position: fixed;
    height: 34px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

main {
    position: absolute;
    top: 50px;
    bottom: 34px;
    overflow-y: scroll;
    z-index: 100;
}

main .content {
    height: 2000px;
}
.popup {
    position: fixed;
    height: 568px;
    top: 0;
    bottom: 0;
    z-index: 1000;
}

测试设备是iOS10中微信内置浏览器。
页面布局如上，假设页面窗口高度为568px，.popup 是相对于窗口定位，照理说应该会覆盖整个屏幕，可是为什么.popup的上下高度会被‘隐去’50px和34px，就好像受到了.main定位的影响？

html css

阅读 2.4k

2 个回答

得票最新