CSS位置属性：粘和绝对

91zkwejq 于 2023-05-30 发布在其他

关注(0)|答案(2)|浏览(82)

* {
  margin: 0;
  padding: 0;
}

p {
  text-align: justify;
}

.container {
  margin: 15px auto;
  border: 2px solid #FF0000;
  background-color: #69D818;
  width: 80%;
  height: 6000px;
}

h1 {
  background-color: #0013FF;
}

#first {
  position: sticky;
  top: 10px;
}

#second {
  position: fixed;
  top: 200px;
}

#third {
  position: absolute;
  width: 100%;
  top: 250px;
}

#fourth {
  position: relative;
  top: 50px;
}

<div class="container">
  <h1 id="first">Position Sticky</h1>
  <h1 id="second">Position Fixed</h1>
  <h1 id="third">Position Absolute</h1>
  <h1 id="fourth">Position Relative</h1>
</div>

在上面的代码中css的位置是不工作的。当我向下滚动时，标题没有粘在顶部位置。但当我到达向上滚动粘性属性是工作。另一个问题是立场：绝对标题的宽度是：100%，它离开了div容器，但我认为它应该在div容器中。帮助

css

来源：https://stackoverflow.com/questions/76352229/css-position-property-sticky-and-absolute

2条答案

按热度按时间

mkh04yzy1#

position: sticky可以工作，只是元素重叠了，因为你需要指定更高的z-index。
如果给定一个position: relative;，一个position: absolute;的元素将占据.container宽度的100%：

<!DOCTYPE html>
    <html>

    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>CSS position</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }

        p {
          text-align: justify;
        }

        .container {
          margin: 15px auto;
          border: 2px solid #FF0000;
          background-color: #69D818;
          width: 80%;
          height: 6000px;
          position: relative;
        }

        h1 {
          background-color: #0013FF;
        }

        #first {
          position: sticky;
          top: 10px;
          z-index: 666; /* 👈 */
        }

        #second {
          position: fixed;
          top: 200px;
        }

        #third {
          position: absolute;
          width: 100%;
          top: 250px;
        }

        #fourth {
          position: relative;
          top: 50px;
        }
      </style>
    </head>

    <body>
      <div class="container">
        <h1 id="first">Position Sticky</h1>
        <h1 id="second">Position Fixed</h1>
        <h1 id="third">Position Absolute</h1>
        <h1 id="fourth">Position Relative</h1>
      </div>
    </body>

    </html>

赞(0）回复(0）举报 2023-05-30

6jjcrrmo2#

它确实有效，只是你看不到它，因为它重叠了。
更高的z-index数字使其在Z维度上更高（在屏幕中更接近您）。因此，为了防止重叠，需要指定z-index：

#first {
  position: sticky;
  top: 10px;

  z-index: 2; // higher z-index than everything else
}

完整的工作示例：

* {
  margin: 0;
  padding: 0;
}

p {
  text-align: justify;
}

.container {
  margin: 15px auto;
  border: 2px solid #FF0000;
  background-color: #69D818;
  width: 80%;
  height: 6000px;
}

h1 {
  background-color: #0013FF;
}

#first {
  position: sticky;
  top: 10px;

  z-index: 2; // higher z-index than everything else
}

#second {
  position: fixed;
  top: 200px;
}

#third {
  position: absolute;
  width: 100%;
  top: 250px;
}

#fourth {
  position: relative;
  top: 50px;
}

<div class="container">
  <h1 id="first">Position Sticky</h1>
  <h1 id="second">Position Fixed</h1>
  <h1 id="third">Position Absolute</h1>
  <h1 id="fourth">Position Relative</h1>
</div>

有关z-index属性的更多信息，您可以访问：

赞(0）回复(0）举报 2023-05-30

我来回答

CSS位置属性：粘和绝对

2条答案

相关问题

热门标签

最新问答