包裝向右移動，如果我添加css：頂部

Question

當我添加頂部樣式規則我的包裝下來，但也離開了，我不明白，請幫助我。

JS Fiddle click me

.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。該邊距是未顯示的滾動條的寬度。

如果insteed身體上使用overflow-x: hidden;的你只是用overflow: hidden;將固定的，但我不知道這是否會爲你生成其他的問題，我們不知道你的最終結果將是什麼

Answer 2

試試這個：

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