我的布局基于css-grids。我设法使用以下方法将标题放置在顶部:
position: -webkit-sticky; position: sticky; top: 0; z-index: 10;
但是,如果我尝试将相同的代码用于任何侧边栏(但顶部为200px,则为实例),将不起作用。
这是我的代码笔中的代码,如果您觉得更简单(https://codepen.io/fergos2/pen/MWgLqgL?editors=1100)。但是,我也将其包括在下面,但不包含唇膏。
我不想使用position:fixed破坏网格布局。还有其他更简单的方法同时保留网格吗?...在此先感谢您帮助这个新手!
<div class="container"> <header class="header pd">Header</header> <div class="left-sidebar pd"> <div class="box-1 pd"> Box-1 </div> <footer class="footer pd"> Footer </footer> </div> <div class="main-content pd"> Main content </div> <div class="right-sidebar pd"> <div class="box-2 pd"> Box-2 </div> <div class="box-3 pd"> Box-3 </div> </div> </div>
.container { width: 100%; margin: 0 auto; background-color: #eee; display: grid; grid-template-rows: min-content 1fr; grid-template-columns: 1fr 2fr 1fr; grid-gap: 15px; grid-template-areas: "head head head" "leftbar main rightbar"; & > * { background-color: pink; color: #ggg; font-size: 20px; font-family: sans-serif; } } .pd { padding: 15px; } .header { grid-area: head; position: -webkit-sticky; position: sticky; top: 0; z-index: 10; } .left-sidebar { grid-area: leftbar; position: -webkit-sticky; position: sticky; top: 200px; display: flex; flex-direction: column; justify-content: flex-start; .box-1 { color: red; border: 1px solid purple; margin-bottom: 5px; } .footer { color: green; border: 1px solid purple; } } .main-content { grid-area: main; } .right-sidebar { grid-area: rightbar; display: flex; flex-direction: column; justify-content: flex-start; .box-2 { color: red; border: 1px solid purple; margin-bottom: 5px; } .box-3 { color: green; border: 1px solid purple; } }
我的布局基于css-grids。我设法通过使用以下命令将标题粘贴到顶部:position:-webkit-sticky;位置:粘性;最高:0; z索引:10;但是,如果我尝试使用...
如果我尝试将相同的代码用于任何侧边栏(但顶部为200px,则为实例),则不起作用