位置粘性与 z 索引相结合

Question

在下面的HTML和CSS中，我创建了一个标题和一个图像动画，您也可以在此处的JSfiddle中找到：

body {
margin: 0;
}
/* 01.00 HEADER: Items in header */
.header_01 {
width: 80%;
height: 10vh;

position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
z-index:99;


text-align: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;    
}
.header_02 {
width: 80%;
height: 10vh;

margin: 10vh auto 0;
position: sticky;
z-index:99;

top:0;
display: flex;
justify-content: space-between;

box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;

box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 70%;
height: 100%;

box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: aqua;
}
/* 02.00 NAVIGATION */
.navigation>ul {
height: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;

box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: blue;
}
.navigation>ul>li {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;

box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
/* 03.00 CONTENT */
.image_animation {
width: 80%;
margin-left: 10%;
margin-top: 15%;
float: left;
display: flex;
justify-content: space-between;
background-color: green;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}

.image_list {
width: 100%;
position: relative;
	
background-color: red;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
	
.image_list img {
width: 100%;
height: 100%;
}

.image1 {
height: 100%;
width: 100%;
float: left;
position: absolute;
}

.image2 {
height: 100%;
width: 100%;
float: left;
animation-delay: 2s;
}

.image_list div {
animation-name: animation_home_images;
animation-duration:4s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
@keyframes animation_home_images {
50.0% {
opacity: 1
}
0%, 100%{
opacity: 0
}
}

<div class="header_01">
This is our webpage.
</div>
<div class="header_02">	
<div class="image">
Image
</div>

<nav class="navigation"> 

<ul>

<li class="button_01"> 1.0 Main Menu </li>
<li class="button_01"> 2.0 Main Menu </li>
<li class="button_01"> 3.0 Main Menu </li>

</ul>

</nav>

</div>	
<div class="image_animation">

<div class="image_list">
<div class="image1"><img src="http://placehold.it/101x101"></div>
		<div class="image2"><img src="http://placehold.it/201x201"></div>
	</div>

</div>

如您所见，我有一个由两部分组成的header。用户向下滚动页面后，第一个.header_01应该消失，而第二个.header_02应该保持固定。我最初是通过这里问题的答案来实现这一点的。

到目前为止，所有这些都运行良好。

---

现在，我在标题下方添加了一个带有postion: absolute;属性的.image-animation，该属性是使动画正常工作所必需的。因此，我还按照此处答案中所述向CSS中添加了一个z-index，以便在用户向下滚动页面后在标题下方获取动画。

但是，不知何故，我无法使z-index与position: sticky;属性结合使用，因为当我向下滚动时，两个标题都会消失。

您是否知道我需要在我的代码中更改什么，以便在用户向下滚动后：

a) 第一个.header_01消失，b) 第二个.header_02保持固定，

c).image-animation在标题后面。

Answer 1

只需删除浮点(不需要)，这些浮点使主体的高度仅为顶部标题，因此粘性将无法按预期工作：

body {
margin: 0;
}
/* 01.00 HEADER: Items in header */
.header_01 {
width: 80%;
height: 10vh;

position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
z-index:99;


text-align: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;    
}
.header_02 {
width: 80%;
height: 10vh;

margin: 10vh auto 0;
position: sticky;
z-index:99;

top:0;
display: flex;
justify-content: space-between;

box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;

box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 70%;
height: 100%;

box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: aqua;
}
/* 02.00 NAVIGATION */
.navigation>ul {
height: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;

box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: blue;
}
.navigation>ul>li {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;

box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
/* 03.00 CONTENT */
.image_animation {
width: 80%;
margin-left: 10%;
margin-top: 15%;
display: flex;
justify-content: space-between;
background-color: green;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}

.image_list {
width: 100%;
position: relative;
overflow:hidden;
	
background-color: red;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
	
.image_list img {
width: 100%;
height: 100%;
}

.image1 {
height: 100%;
width: 100%;
position: absolute;
}

.image2 {
height: 100%;
width: 100%;
display:block;
animation-delay: 2s;
}

.image_list div {
animation-name: animation_home_images;
animation-duration:4s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
@keyframes animation_home_images {
50.0% {
opacity: 1
}
0%, 100%{
opacity: 0
}
}

<div class="header_01">
This is our webpage.
</div>
<div class="header_02">	
<div class="image">
Image
</div>

<nav class="navigation"> 

<ul>

<li class="button_01"> 1.0 Main Menu </li>
<li class="button_01"> 2.0 Main Menu </li>
<li class="button_01"> 3.0 Main Menu </li>

</ul>

</nav>

</div>	
<div class="image_animation">

<div class="image_list">
<div class="image1"><img src="http://placehold.it/101x101"></div>
		<div class="image2"><img src="http://placehold.it/201x201"></div>
	</div>

</div>