移动端绝对定位全屏导航遇CSS问题：translateX/left导致高度异常

问题根源 #

当兄弟元素使用transform（如translateX）时，会触发浏览器创建新的堆叠上下文，同时可能导致页面出现横向溢出。仅靠width:100vw和height:100vh的绝对定位元素，在移动端容易出现视口计算偏差，无法覆盖全屏；另外未显式设置定位偏移属性，元素初始位置会受正常流影响，导致覆盖不全。

修复方案 #

有两种可靠的修复方式，任选其一即可：

方案1：使用fixed定位（推荐）

将导航改为固定定位，直接绑定到视口，不受页面滚动和兄弟元素布局干扰：

#mobile-nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: aquamarine;
    opacity:0.5;
}

/* 可选：消除横向滚动条，优化移动端体验 */
body{
    overflow-x: hidden;
}

方案2：优化absolute定位

如果需要保持absolute定位，显式设置偏移属性并确保父容器（body）为定位参考：

#mobile-nav{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: aquamarine;
    opacity:0.5;
}

body{
    overflow-x: hidden;
    position: relative; /* 让absolute以body为定位基准 */
}

修改后的完整代码 #

CSS

*,
::after,
::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    overflow-x: hidden;
}

nav{
    display: flex;
    width: 90%;
    margin: 0 auto;
}

nav>ul {
    display: flex;
    width: 50%;
    justify-content: space-between;
}

nav>ul>li{
    list-style: none;
}

#mobile-nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: aquamarine;
    opacity:0.5;
}

section{
    transform: translateX(50%);
    width: 80%;
    height: 100px;
    border: 2px solid red;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div id="mobile-nav"></div>
    <nav class="nav">
     <ul>
        <li>Home</li>
        <li>Contact</li>
        <li>Products</li>
        <li>Carrers</li>
        <li>Support</li>
     </ul>
    </nav>
    <section></section>
</body>
</html>

内容的提问来源于stack exchange，提问作者BIKI DAS