How to make sticky element appear behind another element?

February 27, 2024

.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>

How can I make the sticky element .test appear behind .first and .third element when scrolling? Currently it will stick to the edge of the .first and .third element. Setting z-index doesn’t seem to work. I’m assuming this is beyond sticky capabilities since it’s more about elemenets overlapping each other? Any ideas on how to achieve this effect?

EDIT: first and third elements shouldnt be sticky, I was just experimenting

EDIT2: updated the code and fiddle

>Solution :

Change the .test{position: sticky;} to fixed

.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: fixed;
  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>

From: https://developer.mozilla.org/en-US/docs/Web/CSS/position

fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its initial containing block, which is the viewport in the case of visual media. Its final position is determined by the values of top, right, bottom, and left.

This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

sticky

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

This value always creates a new stacking context. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor.