设置nav为display:none时svg受影响，如何单独隐藏nav不影响svg？

问题根源和nav隐藏无关，是你给SVG加的margin-top: -6em导致的——header是flex容器，这个超大负margin直接把SVG向上移出了header的可视范围，所以肉眼看不到，但元素本身还在文档流里，因此cursor:pointer依然能触发。

解决方法：

• 删掉SVG的margin-top: -6em，如果要调整位置，用flex容器的对齐属性控制更稳妥。
• 给header加上align-items: center，让内部元素垂直居中，避免位置偏移；再给header设置min-height，确保容器高度足够，防止元素意外移出。

修改后的示例代码：

header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 垂直居中所有子元素 */
    min-height: 6em; /* 保证容器高度，避免SVG被移出 */
}
nav {
    display: none;
}
header svg {
    width: 3em;
    cursor: pointer;
}

如果确实需要微调SVG位置，用小幅度的margin值（比如margin-top: 0.5em）或者position: relative配合top属性，别用会把元素移出容器的大负margin。

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