如果我添加 css: 顶部，包装器将向右移动

Question

当我添加顶级样式规则时，我的包装器下降但也离开了，我不明白，请帮助我。

.svg[for="nav-trigger"] {
position: absolute;
color:white;
height: 13px;
width: 16px;
background-image: url(../assets/menu.svg);
background-repeat: no-repeat;
right: 0; top: 0;
margin: 30px 30px 0 0;
z-index: 2;
cursor: pointer;
}
.nav-trigger + .site-wrap {
 transition: all 0.2s linear;
 }
.nav-trigger:checked ~ .site-wrap {
 top: 80%;
 }

谢谢， Tim4497

Answer 1

好吧，真正移动的不是你的包装纸，而是你的整个 html。该边距是未显示的滚动条的宽度。

如果不是在 body 上使用 overflow-x: hidden;，您只需使用 overflow: hidden;，它将被修复，但我不知道这是否会给您带来其他问题，因为我们不知道您的问题最终结果将是

Answer 2

试试这个：

.nav-trigger:checked ~ .site-wrap {
    position: fixed;
    top: 80%;
    width: 100%
}

如果我添加 css: 顶部，包装器将向右移动

wrapper moves right if I add css: top

html

css

debugging

label