CSS: 如何让粘性元素不粘在页面顶部而是粘在特定像素或位置？

Question

我希望“+01”元素在有人滚动时跟随图像 div，但我不知道如何让它在到达顶部之前开始向下移动页。有没有简单的解决方案？

Answer 1

如果我没有正确理解你的问题，我认为你可能是在瞄准 sticky 职位。 More info

我已经根据您的图像为您制作了这个示例。希望对您有所帮助：

body {margin:0; padding:0; background-color:orange;}
.container {
  position:relative;
  margin:0 auto;
  width:400px;
  margin-top:20px;
  margin-bottom:40px;
}
img {
  width:100%;
  display:block;
  margin-top:-40px;
}
.number {
  position:sticky;
  top:30px;
  margin-left:-40px;
  font-size:40px;
  color:#fff;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
  font-weight:bold;
  
}

<div class="container">
  <div class="number">
      +01
    </div>
    <img src="https://image.shutterstock.com/image-vector/greece-parthenon-sketch-600w-78255484.jpg" alt="">

</div>
<div class="container">
  <div class="number">
      +02
    </div>
    <img src="https://image.shutterstock.com/image-vector/greece-parthenon-sketch-600w-78255484.jpg" alt="">

</div>
<div class="container">
  <div class="number">
      +03
    </div>
    <img src="https://image.shutterstock.com/image-vector/greece-parthenon-sketch-600w-78255484.jpg" alt="">

</div>
<div class="container">
  <div class="number">
      +04
    </div>
    <img src="https://image.shutterstock.com/image-vector/greece-parthenon-sketch-600w-78255484.jpg" alt="">

</div>

Answer 2

只是与上述答案类似的例子，我已经研究过了，所以我 post 它。

body{
margin:0;
padding:0;
}

.container{
margin:0 auto;
height:250px;
width:100px;
margin-top:10px;
position:relative;
padding:0.05px;
}

.img{
width:100%;
height:100%;
position:absolute;
background-color:red;
}

h1{
position:sticky;
top:100px;
margin-top:50px;
}

<body>
<div class="container">
  <div class="img"></div>
  <h1>01<h1>
</div>
<div class="container">
  <div class="img"></div>
  <h1>02<h1>
</div>
<div class="container">
  <div class="img"></div>
  <h1>03<h1>
</div>
<div class="container">
  <div class="img"></div>
  <h1>04<h1>
</div>
<div class="container">
  <div class="img"></div>
  <h1>05<h1>
</div>
</body>

CSS: 如何让粘性元素不粘在页面顶部而是粘在特定像素或位置？

CSS: How to make sticky element stick not to the top of the page but to a specific pixel or position?

javascript

html

css

position

sticky