https://jsfiddle.net/30suam6z/1/
.first {
height: 100vh;
background-color: red;
position: relative;
z-index: 2; /* Increase z-index to ensure it covers .test */
}
.second {
height: 100vh;
background-color: yellow;
position: relative;
z-index: -1;
}
.test {
width: 95%;
height: 50px;
background-color: green;
margin: 0 auto;
position: sticky;
top: 70%;
z-index: -1;
}
.third {
height: 100vh;
background-color: blue;
position: relative;
}<div class="container">
<div class="first"></div>
<div class="second">
<div class="test">Sticky Element</div>
</div>
<div class="third"></div>
</div>Seeking advice on how to make the sticky element .test appear behind .first and .third elements when scrolling. Currently, it remains stuck to the edge of these elements. Adjusting the z-index does not seem to provide a solution. Is there a way to achieve this effect without altering the sticky nature of the element?
Note: The first and third elements should not have sticky behavior; I am simply experimenting with different options.
Update: Code and fiddle have been revised.