js和css打开侧边栏的时候不想推送内容，如何独立

Question

请找到下面的代码 CSS 和 JavaScript。打开侧边栏时会推送主要内容。 我希望它独立于它。 添加了 javascript 代码 谁能帮我解决这个问题？

 function ExpandDrawer() { const drawerContent = document.querySelector(".drawerContent"); drawerContent.classList.toggle("active"); }

 body {background-color: powderblue;} h1 {color: blue;} p {color: red;}.drawerLayer { min-height: 100vh; justify-content: center; align-items: center; float: right; z-index: 2; }.container { position: relative; }.container.drawerContent { position: relative; width: 80px; height: 420px; background: rgb(0,125,187); background: linear-gradient(161deg, rgba(0,125,187,1) 0%, rgba(112,188,224,1) 100%); border-top-left-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transition: 0.5s; }.container.drawerContent.active { width: 300px; overflow-y: scroll; }.toggle { position: absolute; top: calc(50% - 85px); left: -20px; width: 20px; height: 32px; background: rgb(0,125,187); background: linear-gradient(161deg, rgba(0,125,187,1) 0%, rgba(112,188,224,1) 100%); cursor: pointer; border: 1px solid rgba(0,125,187,1); border-radius: 64px 0 0 64px; justify-content: center; align-items: center; }.toggle:before { content: '\e909'; font-family: "font-awesome"; height: 100%; width: 100%; line-height: 30px; position: absolute; text-align: center; font-weight: 900; font-size: 16px; color: rgba(112,188,224,1); }.toggle.active:before { content: '\e909'; }

 <center> <h1>This is a heading</h1> <p>This is a paragraphhsdgaghdhagsd asdasgdjhasgdhsagdjsagdgsa ajhdkjashdkjashdkjahjdkhasd ajhdjkashdkjahdkdjashdjkahkjdhajkdhkjshdjka dvjadjagjhdgajdghagdjagdgahd ajdjagdasgjdgahd.</p> <div class="container drawerLayer"> <div class="drawerContent"> <h3>Hi</h3> </div> <div class="toggle" onClick="ExpandDrawer()"> </div> </div> <p>This is a paragraphhsdgaghdhagsd asdasgdjhasgdhsagdjsagdgsa ajhdkjashdkjashdkjahjdkhasd ajhdjkashdkjahdkdjashdjkahkjdhajkdhkjshdjka dvjadjagjhdgajdghagdjagdgahd ajdjagdasgjdgahd.</p> </center>

有人可以帮忙吗？

Answer 1

应该做一些事情position: absolute可能使它脱离文档元素放置的流程。

 function ExpandDrawer() { const drawerContent = document.querySelector(".drawerContent"); drawerContent.classList.toggle("active"); }

 body { background-color: powderblue; } h1 { color: blue; } p { color: red; }.drawerLayer { min-height: 100vh; justify-content: center; align-items: center; float: right; z-index: 2; }.container { position: absolute; right: 0; }.container.drawerContent { position: relative; width: 80px; height: 420px; background: rgb(0, 125, 187); background: linear-gradient(161deg, rgba(0, 125, 187, 1) 0%, rgba(112, 188, 224, 1) 100%); border-top-left-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transition: 0.5s; }.container.drawerContent.active { width: 300px; overflow-y: scroll; }.toggle { position: absolute; top: calc(50% - 85px); left: -20px; width: 20px; height: 32px; background: rgb(0, 125, 187); background: linear-gradient(161deg, rgba(0, 125, 187, 1) 0%, rgba(112, 188, 224, 1) 100%); cursor: pointer; border: 1px solid rgba(0, 125, 187, 1); border-radius: 64px 0 0 64px; justify-content: center; align-items: center; }.toggle:before { content: '\e909'; font-family: "font-awesome"; height: 100%; width: 100%; line-height: 30px; position: absolute; text-align: center; font-weight: 900; font-size: 16px; color: rgba(112, 188, 224, 1); }.toggle.active:before { content: '\e909'; }

 <center> <h1>This is a heading</h1> <p>This is a paragraphhsdgaghdhagsd asdasgdjhasgdhsagdjsagdgsa ajhdkjashdkjashdkjahjdkhasd ajhdjkashdkjahdkdjashdjkahkjdhajkdhkjshdjka dvjadjagjhdgajdghagdjagdgahd ajdjagdasgjdgahd. </p> <div class="container drawerLayer"> <div class="drawerContent"> <h3>Hi</h3> </div> <div class="toggle" onClick="ExpandDrawer()"> </div> </div> <p>This is a paragraphhsdgaghdhagsd asdasgdjhasgdhsagdjsagdgsa ajhdkjashdkjashdkjahjdkhasd ajhdjkashdkjahdkdjashdjkahkjdhajkdhkjshdjka dvjadjagjhdgajdghagdjagdgahd ajdjagdasgjdgahd. </p> </center>