CSS滚动位置

zd287kbt 于 2023-04-01 发布在其他

关注(0)|答案(1)|浏览(151)

你好师兄，我是新的网页设计。在下面的代码中，当我向下滚动的黄色容器是工作正常（即。移动下导航栏）。但红色容器是滚动以上导航栏。有人可以帮助。
enter image description here
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Sofia&effect=fire|neon|3d|fire-animation|shadow-multiple|3d-float">
</head>

<body>
    <div class="h">
        <div class="nav">
            <img src="logo.png" alt="">
            <h1 class="title font-effect-shadow-multiple">CSS Page</h1>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        
    </div>
   <br>
   <div class="header1">
        
            <img src="black-g51b181fe3_1920.jpg" alt="">
            <div class="side"></div> 

          
      
    </div>

</div>
    
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Sofia;
}

.h {
    position: relative;
}

.nav {
    width: 100%;

   position: fixed;
    display: flex;
    background-color: aquamarine;
    
    height: 100px;
    box-shadow: 10px 10px 20px #1e1b249f;

}

.nav ul {
    /* position: relative; */
    font-size: 29px;
    margin-left: 65%;
    margin-top: 16px;
    float: right;
    justify-content: space-between;

}

li {
    list-style: none;
    padding: 10px;
    display: inline-block;

}

.nav ul li a {
    text-decoration: none;
    color: black;
}

.nav ul li:hover {
    text-decoration: underline;
    text-decoration-color: chartreuse;
}

.title {
    font-size: 33px;
    position: absolute;
    top: 23px;
    left: 43%;
    color: black;
}

.header1 {
    margin-top: 400px;
    top: 50px;
    border: 10px solid yellow;
    /* top: 104px; */
    position: static;
}

.header1 img {
    width: 100%;
    height: 800px;
}

.heading {

    bottom: 300px;
    left: 40px;
    color: antiquewhite;
    height: 200px;
    width: 300px;
}

.heading h1 {
    text-decoration: underline;
    text-decoration-color: aquamarine;
}

.side {
position: absolute;
    top: 550px;
    right: 20px;
    border: 20px solid red;
    width: 350px;
    height: 350px;
}

.side img {
    background-size: cover;
}

当我们滚动时，黄色和红色边框的容器都需要在固定的导航条下面。但是红色边框的容器在滚动时滚动在导航条上面。

css

来源：https://stackoverflow.com/questions/75867921/css-scrolling-position

1条答案

按热度按时间

gg0vcinb1#

只需将z-index: 1;添加到.nav（如果您有其他需要此功能的元素，则可以使用更高的值）：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Sofia;
}

.h {
  position: relative;
}

.nav {
  width: 100%;
  position: fixed;
  display: flex;
  background-color: aquamarine;
  height: 100px;
  box-shadow: 10px 10px 20px #1e1b249f;
  z-index: 1;
}

.nav ul {
  /* position: relative; */
  font-size: 29px;
  margin-left: 65%;
  margin-top: 16px;
  float: right;
  justify-content: space-between;
}

li {
  list-style: none;
  padding: 10px;
  display: inline-block;
}

.nav ul li a {
  text-decoration: none;
  color: black;
}

.nav ul li:hover {
  text-decoration: underline;
  text-decoration-color: chartreuse;
}

.title {
  font-size: 33px;
  position: absolute;
  top: 23px;
  left: 43%;
  color: black;
}

.header1 {
  margin-top: 400px;
  top: 50px;
  border: 10px solid yellow;
  /* top: 104px; */
  position: static;
}

.header1 img {
  width: 100%;
  height: 800px;
}

.heading {
  bottom: 300px;
  left: 40px;
  color: antiquewhite;
  height: 200px;
  width: 300px;
}

.heading h1 {
  text-decoration: underline;
  text-decoration-color: aquamarine;
}

.side {
  position: absolute;
  top: 550px;
  right: 20px;
  border: 20px solid red;
  width: 350px;
  height: 350px;
}

.side img {
  background-size: cover;
}

<div class="h">
  <div class="nav">
    <img src="logo.png" alt="">
    <h1 class="title font-effect-shadow-multiple">CSS Page</h1>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact</a></li>
    </ul>

  </div>
  <br>
  <div class="header1">

    <img src="black-g51b181fe3_1920.jpg" alt="">
    <div class="side"></div>


  </div>

</div>

赞(0）回复(0）举报 2023-04-01

我来回答

CSS滚动位置

1条答案

相关问题

热门标签

最新问答