1

I have run into a bit of a problem here with displaying two sticky elements that don't share a parent. I am trying to get .the-second-sticky (some kind of table header) to be on top of the .dropdown-parent's background, which means it should have a higher z-index. At the same time, the child of .dropdown-parent is an expandable menu, and I would like for the menu to be over .the-second-sticky. But I couldn't find a way to do it, as there is no way to make a child have a higher z-index than its parent. Can anyone help me out with this?

In the snippet below, you can start scrolling to get the sticky elements to line up at the top, then click the expand button to expand the dropdown menu.

const btn = document.querySelector('button')
let isExpanded = false
btn.onclick = () => {
  document.querySelector('.dropdown').style.height = isExpanded ? '' : '500px'
  isExpanded = !isExpanded
}
body {
  height: 2000px;
}

.dropdown-parent {
  margin-top: 100px;
  width: 100vw;
  height: 50px;
  position: sticky;
  top: 0;
  background-color: red;
}

.dropdown {
  width: 500px;
  height: 20px;
  background-color: green;
  z-index: 9999;
}

.the-second-sticky {
  width: 500px;
  position: sticky;
  top: 30px;
  background-color: yellow;
}

button {
  position: fixed;
  right: 10px;
  top: 10px;
}
<div class='dropdown-parent'>
  <div class='dropdown'>I should be on the very top</div>
</div>
<div class='the-second-sticky'>I should be on top of the red, but under the green when expanded</div>
<button>Toggle</button>
Donald Zhu
  • 672
  • 4
  • 14

1 Answers1

0

As per the placement of the elements I think with position:sticky; you may give z-index: -1 to your sticky element. This will take care of not overlapping your sticky element over your dropdown. While parent of your dropdown will have z-index : auto. Remember, with position:sticky its always better to put your element at right place inside the dom to avoid such overlapping issues.

Desired code-snippet should be as follows

.the-second-sticky {
  width: 500px;
  position: sticky;
  top: 30px;
  background-color: yellow;
  z-index : -1;    // <--- This should help
}
Mahesh
  • 1,427
  • 2
  • 19
  • 42
  • If I do so, the second sticky would go under the red background of the parent container. – Donald Zhu Jul 03 '21 at 07:03
  • It won't.. Check out this. https://codepen.io/maheshkedari/pen/abWdoVL For two items in sticky position, they will be rendered as per the sequence in the DOM and won't be overlapped. – Mahesh Jul 05 '21 at 04:17
  • I am not sure if that's the case, since in your snippet the second sticky goes under the red background upon scrolling. – Donald Zhu Jul 05 '21 at 05:03
  • Sticky will try to stick your element to specified top. So this overlap is taking place. If you wish to avoid it, why don't you specify different value of `top`? I tried with top:50px and its working. Can you check this updated codepen? https://codepen.io/maheshkedari/pen/abWdoVL – Mahesh Jul 05 '21 at 06:33
  • Reference: https://css-tricks.com/almanac/properties/p/position/#sticky – Mahesh Jul 05 '21 at 06:34
  • Thanks for your response but that would defeat the purpose of what I am trying to achieve. I think the question this one is merged with has the right solution – Donald Zhu Jul 06 '21 at 18:29
  • 1
    No problem buddy..!! wish you luck. – Mahesh Jul 07 '21 at 05:12