0

I have the following HTML and CSS for a website which you can also find in the JSfiddle here:

body {
  margin: 0;
}


/* 01.00 HEADER */

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  
  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: 10%;
 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"> 

      <div class="image">
      Image
      </div>
  
      <nav class="navigation"> 
      
        <ul>
          <li> 1.0 Main Menu </li>
          <li> 2.0 Main Menu </li>
          <li> 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>

As you can see I have a .header with the property postion: fixed; containing an .image and a .navigation. Below the .header I have an .image_animation of two images running infinite once the user opens the website.

All this works fine so far.

Now, I am facing the issue that once the user scrolls down the page the .header remains fixed but the animated pictures stay on top of the fixed .header.
As far as I can see this issue results from the position: absolute; of the .image1.
However, based on the answer in this question the position: absolute; is necessary to make the .image_animation work.

How can I change my code to make both the .image_animation work and let it go below the fixed header once the user scrolls down the page?

Michi
  • 4,663
  • 6
  • 33
  • 83

2 Answers2

1

add z-index-1 to .header class. thanks

ref below link

http://jsfiddle.net/szmbrLx2/888

Xenio Gracias
  • 2,728
  • 1
  • 9
  • 16
0

Try this. add z-index in .header

body {
  margin: 0;
}


/* 01.00 HEADER */

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index:99;
  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: 10%;
 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"> 

      <div class="image">
      Image
      </div>
  
      <nav class="navigation"> 
      
        <ul>
          <li> 1.0 Main Menu </li>
          <li> 2.0 Main Menu </li>
          <li> 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>
Hariom Singh
  • 1,420
  • 1
  • 8
  • 21