为何<main>样式修改会影响<header>中链接的可点击区域？

为提升移动端文本可读性，我在@media screen and (max-width:500px)规则中给.main:not(#article-video)设置了左右margin:1rem，结果header里导航栏的第一个链接只能在屏幕左侧边距区域被点击，该问题仅出现在移动端。

相关代码 #

CSS代码 #

@media screen and (max-width: 500px) {
    .ref-text{
        display: none;
    }

    .main:not(#article-video){
        margin-left: 1rem;
        margin-right: 1rem;
    }

    hr{
        margin-left: 1rem;
        width: 90%;
    }
}
}

HTML代码 #

<header>  
        <div class="navbar">
                <a class="menu-bars" id="show-menu">
                    <i class="fas fa-bars"></i>
                </a>
                <ul id="referinta">
                    <li class="ref-text">Impactul COVID-19 asupra antreprenoriatului și comportamentului consumatorilor</li>
                </ul>
                <div class="mode">
                    <a class="day-mode invisible">
                        <i class="far fa-sun icon" id="sun"></i>
                    </a>
                    <a class="night-mode">
                        <i class="far fa-moon icon" id="moon"></i>
                    </a>
                </div>
        </div>
        <nav id="nav-menu">
            <ul class="nav-menu-toggle">
                <a class="menu-bars-toggle" id="hide-menu">
                    <i class="fas fa-bars icon-bars"></i>
                </a>
                <hr />
                <div class="nav-section">
                    <li class="nav-text"><a href="#" ><i class="fa fa-home nav-icon s-icon"></i> Home</a></li>
                    <li class="nav-text"><a href="#"><i class="fa fa-youtube nav-icon s-icon"></i> Youtube</a></li>
                </div>
                <hr />
                <p id="copy">Creat de <br>C</p>
            </ul>
        </nav>
    <script src="app.js"></script>
    </header>

问题排查与解决 #

问题根源是.main元素的左右margin导致它的视觉范围延伸到了header区域上方，遮挡了导航链接的点击区域（虽然margin是外部间距，但如果.main的层叠层级高于header，就会拦截点击事件）。

可行修复方案 #

1. 提升header的层叠优先级
   在移动端媒体查询中给header添加相对定位和更高的z-index，确保它在.main之上：

@media screen and (max-width: 500px) {
    /* 保留原有CSS规则 */
    header {
        position: relative;
        z-index: 100;
    }
}

2. 替换margin为padding
   把.main的左右margin改成padding，这样不会让元素的外部空间覆盖到header区域：

@media screen and (max-width: 500px) {
    .main:not(#article-video){
        padding-left: 1rem;
        padding-right: 1rem;
        margin-left: 0;
        margin-right: 0;
    }
}

3. 调整.main的定位/布局
   如果.main使用了absolute或fixed定位，检查它的top值，确保和header没有重叠区域；或者给header设置足够的底部间距，让.main的内容从header下方开始布局。

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