how to lower z-index of inner absolute div with respect to outer absolute div?

Asked Apr 22 '18 at 11:27

Active Apr 22 '18 at 12:20

Viewed 31 times

What I want:

What I am getting instead:

Respective code: https://jsfiddle.net/JerryGoyal/2zy2wj78/4/

.circle {
  display: inline-block;
  border: solid 20px blue;
  border-radius: 51%;
  position: absolute;
  z-index: 5;
}

.line {
  margin: 0 0 0 -2px;
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 100px;
  background: red;
  z-index: -1;
}

<div class='circle'>
  <div class='line'></div>
</div>

edited Apr 22 '18 at 12:20

Mohammad Javad Noori

1,187
12
23

asked Apr 22 '18 at 11:27

GorvGoyl

42,508
29
229
225

Can you just remove z-index from parent? – Nenad Vracar Apr 22 '18 at 11:29
1

See https://stackoverflow.com/questions/1806421/how-to-get-a-parent-element-to-appear-above-child – Nenad Vracar Apr 22 '18 at 11:32
@NenadVracar no I can't because there are other elements on the page which would hide this parent div – GorvGoyl Apr 22 '18 at 11:33
1

Then try that second answer on linked question. – Nenad Vracar Apr 22 '18 at 11:36
@NenadVracar hmm that worked https://jsfiddle.net/JerryGoyal/2zy2wj78/15/.. but could it be possible without adding any wrapper? – GorvGoyl Apr 22 '18 at 11:42

how to lower z-index of inner absolute div with respect to outer absolute div?

0 Answers0