当标题下方有一个“位置：固定；”标题和图像滑块“位置：相对；”时该怎么办？

Question

I have made a header using the CSS property, position: fixed; & just below the header part I have included an image slider with a CSS property, position: relative; . My problem is that when scrolling down the page the images tend to interfere with the header part. Please tell me what to do?

.header{position: fixed; background-color: black;}

.sliderbox{position: relative; width: 1200px; animation-duration: 20s; animation-name: slideranimation;}

@keyframes slideranimation{0%{left: 0px;} 20%{left:0px;}.....}  

Answer 1

Use z-index option to keep the header always on top, like this:

.header {
  z-index: 2; /* This value is sufficient if the other content does not have a z-index value. */
}