粘性位置结合 z-index

Question

在下面的 HTML 和 CSS 中，我创建了一个 header 和一个 image-animation，您也可以在 JSfiddle here:

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 应该保持固定。我最初是通过问题的答案实现的。

到目前为止一切正常。

现在我在 header 下面添加了一个 .image-animation 和一个 postion: absolute; 属性，这是使动画工作所必需的。因此，我还在 CSS 中添加了一个 z-index，如答案中所述，以便在用户向下滚动页面时在 header 下方获得动画。

但是，我无法使 z-index 与 position: sticky; 属性结合使用，因为当我向下滚动时，两个 header 都消失了。

你知道我需要在我的代码中更改什么吗，所以一旦用户向下滚动：

a) 第一个 .header_01 消失并且
b) 第二个 .header_02 保持不变并且
c) .image-animation 落后于 header.

Answer 1

只需移除使 body 仅具有顶部 header 高度的浮动（不需要），因此粘性将无法按预期工作：

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>

粘性位置结合 z-index

Position sticky combined with a z-index

html

css

z-index

css-animations