Position fixed child on top of next element with z-index relative

Question

I need to make child below parent to bo on top of relative element, is it possible to do it ?

<div class="parent fixed">
  <div class="child absolute">
</div>
<div class="next-element relative">

Now css:

.parent {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.child {
    position: absolute;
}
.next-element {
    z-index: 1;
    position: relative;
}

Is it possible ?

Answer 1

I am not completely sure I understand the problem, but if the z-index of parent (and hence its child) is greater than the z-index of the next item then the child will be 'on top of' next element.

Here's a simple snippet with the elements given dimensions so they can be seen and next element given z-index -1 just to make it less than the first element (where z-index defaults to 0).

 .parent { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: cyan; } .child { position: absolute; width: 20%; height: 20%; background-color: lime; } .next-element { z-index: -1; position: relative; background-color: pink; width: 30%; height: 30%; }

 <div class="parent fixed"> <div class="child absolute"> </div> <div class="next-element relative">