0

I have two elements, one of which is on top of the other and has position: sticky. I need its shadow to appear behind the second element, so I've applied it to a pseudo-element. This works when the element's position is relative, but not when it's sticky.

Is there a way to get the desired result, visible at the CodePen (or by un-commenting the position: sticky)?

CodePen

(Edit: There're lots of answered questions around about sticky elements; this is much more concerned about how to stack elements with z-index when they need to be position: sticky.)

.one, .two {
  width: 100px;
  height: 100px;
}
.one {
  background-color: orange;
  margin-left: 50px;
  position: sticky;
/*  position: relative; */
}
.one:before {
  content: "";
  position: absolute;
  background-color: red;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 20px 20px 0 purple;
  z-index: -10;
}
.two {
  position: relative;
  top: -50px;
  background-color: green;
  z-index: -1;
}
<div class="one"></div>
<div class="two"></div>
Alesh Houdek
  • 938
  • 2
  • 7
  • 20
  • @AnuragSrivastava nope. That question is about styling sticky elements differently when they're "stuck." My question is more about how position-sticky interacts with z-index stacking order. – Alesh Houdek Jan 08 '20 at 18:27
  • you cannot, Sticky (unlike Relative) will create a stacking context so the pseudo element can no more go behind its parent – Temani Afif Jan 08 '20 at 19:59

0 Answers0