我修改了您的CSS代码并添加了 comments 来解释我包含的内容和原因.以下是一些有用的读物.每种类型的职位都值得熟悉.
.header {
display: flex;
-webkit-box-flex: 1;
flex-grow: 1;
margin: 0px 25px;
height: 64px;
background-color: blue;
/* position: fixed; */ /* the issue with 'fixed' is that it doesn't interact with the rest of the page's elements */
position: sticky; /* in contrast, 'sticky' will keep it at the top of the page, but only when scrolling downwards */
top: 0px;
z-index: 999;
width: 100%;
}
.content {
position: relative; /* for relative elements, you can position children with absolute alignment */
width: inherit;
box-sizing: border-box;
}
.banner {
position: absolute; /* so instead of 'sticky', you can align it to the relative parent with 'absolute' */
top: 0px;
width: inherit;
z-index: 100;
box-sizing: border-box;
background-color: red;
width: 100%;
}
.form {
padding-top: 15px;
padding-left: 24px;
padding-right: 24px;
display: flex;
flex-flow: wrap;
width: 100%;
height: 1000px;
background-color: green;
z-index: -9;
}
<div class="App">
<div class="header"></div>
<div class="content">
<div class="banner">Hello</div>
<div class="form"></div>
</div>
</div>
不清楚您想要什么，因为您没有提供屏幕截图.如果目标是始终显示标题，然后显示标题下方的横幅，然后显示标题下方的内容，那么您只需要稍微调整顶部像素即可.
.header {
display: flex;
-webkit-box-flex: 1;
flex-grow: 1;
margin: 0px 25px;
height: 64px;
background-color: blue;
/* position: fixed; */ /* the issue with 'fixed' is that it doesn't interact with the rest of the page's elements */
position: sticky; /* in contrast, 'sticky' will keep it at the top of the page, but only when scrolling downwards */
top: 0px;
z-index: 999;
width: 100%;
}
.content {
width: inherit;
box-sizing: border-box;
background: yellow; /* highlighted it in yellow
so you can see that the .banner actually starts from the top of the .content,
it's just that the .form doesn't start from the top of the .content
because the .banner is there */
}
.banner {
position: sticky;
top: 64px; /* instead of 0, place it so that it starts below the height of the header. */
width: inherit;
z-index: 100;
box-sizing: border-box;
background-color: red;
width: 100%;
}
.form {
padding-top: 15px;
padding-left: 24px;
padding-right: 24px;
display: flex;
flex-flow: wrap;
width: 100%;
height: 1000px;
background-color: green;
z-index: -9;
}
<div class="App">
<div class="header"></div>
<div class="content">
<div class="banner">Hello</div>
<div class="form"></div>
</div>
</div>