How to set element to layer between elements with sticky and fixed position-CodePudding

I have such code example:

 <div style="width: 500px; height: 520px; position: sticky; z-index: 10;">
    <div style="position: fixed; width: 100px; height: 100px; z-index: 50;"></div>
 </div>

also I have a Shadow DOM, with element A, which I want to set between child and parent div

when I set z-index: 11 to this element A (between z-index of parent and child) the element A is above parent and child div when I set it z-index: 9, the element A is under parent and child div

How I can set element A between child and parent div?

CodePudding user response：

You can't have an element outside the parent be between the parent and child. That's because the sticky position (like most positions) creates a new stacking context:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

In other words, anything below a z-index of 50 will be below both elements, anything above 50 will be above both elements.

To achieve what you're trying to do, the other elements must both be in a stacking context that is shared by element A. Assuming the parent must remain sticky, you can either move the child outside the parent, or put the new div inside the parent.

element A is red, the sticky div is blue, and the child is green.

<p>Scroll Down</p>
 

 <div style="width: 200px; height: 200px; position: sticky; z-index: 10; background: blue; top:50px; margin-top: 300px"></div>
 <!-- Child moved to main stacking context -->
 <div style="position: sticky; width: 100px; height: 100px; z-index: 50; background: green; top:50px; margin-top: 200px"></div>
 
   <!-- New div with z-index between -->
 <div style="position: fixed; width: 150px; height: 150px; z-index: 11; background: red; top:50px;"></div>
 
 <!-- Make some scrolling room -->
 <div style="height:2000px; width:1px;"></div>

<p>Scroll Down</p>
 
 <div style="width: 200px; height: 200px; position: sticky; z-index: 10; background: blue; top:50px; margin-top: 300px">
    <!-- New div with z-index between -->
    <div style="position: fixed; width: 150px; height: 150px; z-index: 11; background: red; top:50px;"></div>
    <div style="position: sticky; width: 100px; height: 100px; z-index: 50; background: green; top:50px; margin-top: 200px"></div>
 </div>

 <!-- Make some scrolling room -->
 <div style="height:2000px; width:1px;"></div>

You could put the child inside the new div as well.

CodePudding user response：

The parent element should be position: relative. Then the child element applies on inside the parent. Note that child element should have top, bottom, left, right.

.parent {
   position: relative;
   width: 500px;
   height: 500px;
}

.child {
   width: 350px;
   height: 350px;
   background-color: red;
   position: fixed;
   bottom: 0;
   right: 0;
}