我很难理解为什么粘性 div 不插入其他粘性 div。 我很确定我已经看到它是这样工作的,但我想不通。
我希望 Header 1 插入 Header 2 不与其重叠。 HTML
<div class="header">
<h1>Header 1</h1>
</div>
<div class="item">
<h1>Item1</h1>
</div>
<div class="item">
<h1>Item2</h1>
</div>
<div class="header">
<h1>Header 2</h1>
</div>
<div class="item">
<h1>Item1</h1>
</div>
<div class="item">
<h1>Item2</h1>
</div>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #000;
font: bold 20vw Helvetica, Arial, sans-serif;
}
.header {
position: sticky;
top: 0px;
height: 100%;
width: 100%;
background: white;
}
.item {
height: 100vh;
width: 100%;
background: #00f;
}
这是一个示例以及我正在尝试做的事情。 https://jsfiddle.net/7zfq491o/
最佳答案
你需要不同的包装器:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #000;
font: bold 20vw Helvetica, Arial, sans-serif;
}
.header {
position: sticky;
top: 0px;
background: white;
}
.item {
height: 100vh;
background: #00f;
}
<section>
<div class="header">
<h1>Header 1</h1>
</div>
<div class="item">
<h1>Item1</h1>
</div>
<div class="item">
<h1>Item2</h1>
</div>
</section>
<section>
<div class="header">
<h1>Header 2</h1>
</div>
<div class="item">
<h1>Item1</h1>
</div>
<div class="item">
<h1>Item2</h1>
</div>
</section>
关于html - Css 位置粘性,重叠而不是推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65142776/