Html 如何在图像上方显示粘性元素？_Html_Css

Html 如何在图像上方显示粘性元素？

html css

Html 如何在图像上方显示粘性元素？,html,css,Html,Css,我正在制作一个网站，我有一个“粘滞元素”和一堆下面的图像，问题是，如果我向下滚动“粘滞元素”到图像后面，因此变得不可见。当我向下滚动时，我想使“粘滞元素”可见。我尝试了“z-index”CSS属性，但它不起作用（可能我没有正确使用它） div{ 位置：粘性； } “粘性元素” 正如您所见，您不需要z-index来实现这一点，也许您忘记了将top添加到粘滞元素？我还为元素添加了粉色背景，这样更容易看到，但这当然不是必需的如果后面的元素也定义了z索引，则只需要z索引 #粘性{ 位置：粘性；

我正在制作一个网站，我有一个“粘滞元素”和一堆下面的图像，问题是，如果我向下滚动“粘滞元素”到图像后面，因此变得不可见。当我向下滚动时，我想使“粘滞元素”可见。我尝试了“z-index”CSS属性，但它不起作用（可能我没有正确使用它）


div{
位置：粘性；
}
“粘性元素”

正如您所见，您不需要z-index来实现这一点，也许您忘记了将top添加到粘滞元素？我还为元素添加了粉色背景，这样更容易看到，但这当然不是必需的

如果后面的元素也定义了z索引，则只需要z索引

#粘性{
位置：粘性；
排名：0；
背景：粉红色；
}


“粘性元素”

如果这对你有帮助的话，你也可以试试，因为你没有提到为什么要使用sticky。所以这个解决方案和你想要的完全一样

<style>
div{
  position: fixed;
  background-color: beige;
  width: 100%;
  top: 0;
  left: 0;
  padding: 10px 10px;
}
</style>

<body>
 <div>
  "Sticky element"
 </div>
<br>
 <img src="https://www.cecidiomas.es/images/cecidiomases/684-thinking-of-getting-a-cat-international-cat-care-3435.png">
<br>
 <img src="https://www.cecidiomas.es/images/cecidiomases/684-thinking-of-getting-a-cat-international-cat-care-3435.png">
</body>


div{
位置：固定；
背景颜色：米色；
宽度：100%；
排名：0；
左：0；
填充：10px 10px；
}
“粘性元素”

增加z索引值并添加！像这样结束时很重要

z-index:9999！重要的试试这个
<style>
div{
  position: fixed;
  background-color: beige;
  width: 100%;
  top: 0;
  left: 0;
  padding: 10px 10px;
}
</style>

<body>
 <div>
  "Sticky element"
 </div>
<br>
 <img src="https://www.cecidiomas.es/images/cecidiomases/684-thinking-of-getting-a-cat-international-cat-care-3435.png">
<br>
 <img src="https://www.cecidiomas.es/images/cecidiomases/684-thinking-of-getting-a-cat-international-cat-care-3435.png">
</body>