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

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

<style>

div{

position: sticky;

}

</style>

<body>

<div>

"Sticky element"

</div>

<br>

<br>

</body>

慕沐林林

浏览 92回答 2

2回答

郎朗坤

如您所见，您不需要 z-index 来实现此目的，也许您忘记将 top 添加到粘性元素？我还在元素中添加了粉红色背景，以便更容易看到，但这当然不是必需的仅当后面的元素也定义了 z-index 时，才需要 z-index。#sticky{  position: sticky;  top: 0;  background: pink;}<div id="sticky">  "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">

小唯快跑啊

如果它对您有帮助，您也可以尝试一下，因为您没有提到为什么要使用粘性。所以这个解决方案的工作原理与你想要的完全相同。<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>

随时随地看视频慕课网APP