z-index - getting deep nested element to the front

Question

I have the below HTML & CSS, I want take out the little black square to the front i.e. over & above the overlay, I should only see the black square. This markup is just the stripped version of my code.

Black box on the top right need to get in front of all layers, including overlay layer.

Plunk - http://plnkr.co/edit/FEo8AQBBrh1YMHrduZeM?p=preview

HTML:

<body>
    <div class="div1">div1
      <div class="div1-1">div1-1
        <div class="div1-1-1">
          div 1-1-1
          <div class="div1-1-1-1">
            1-1-1-1
          </div>
        </div>
      </div>
    </div>
    <div class="overlay"></div>
  </body>

CSS:

body{color:#fff;}
.overlay{position:fixed; top:0; left:0; right:0; bottom:0; background:#000;opacity:.5; z-index:1005;}
.div1{width:100%; height:600px; background:red; position:relative;}
.div1-1 {width:auto; height:600px; background:blue; position:absolute; z-index:2; left:40px;
  top:0; bottom:0; right:0;
}
.div1-1-1 {width:100%; height:40px; background:green; position:absolute; z-index:15;
  top:0;right:0; left:0;
}
.div1-1-1-1 {width:40px; height:40px; background:black; position:absolute; right:0; top:0;}

which black square..not clear. if not mistaking its already up — Deepak Ingole, Jul 30 '14 at 09:28
@Pilot - I just moved it to little left, as button from plunker were overlapping a bit. Please check now. — whyAto8, Jul 30 '14 at 09:30
@BradlySpicer - Apologies if its confusing, but I just wanted to show the parent-child kind of relation — whyAto8, Jul 30 '14 at 09:32
@whyAto8 You should use z-index value for `div1-1-1-1` more than `overlay` div `z-index`. And using `z-index` value in range of 1k is bad — Deepak Ingole, Jul 30 '14 at 09:34
@Pilot - Well, as I said, its a stripped version of my code where there are other z-index values in play as well. Anyway, giving div1-1-1-1 more than overlay doesnt work. — whyAto8, Jul 30 '14 at 09:38
@whyAto8 - Were you able to figure out a solution to this without changing the structure and without changing the z-index of the parent elements? — AshD, Aug 23 '18 at 18:33

score 1 · Answer 1 · answered Jul 30 '14 at 09:45

I have changed a lot of structure, for achieving the task, please check the Code here

CSS Code: /* Styles go here */

body{color:#fff;}
.overlay {
    background: none repeat scroll 0 0 #000000;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 20;
}
.div1{width:100%; height:600px; background:red; position:relative;}
.div1-1 {
    background: none repeat scroll 0 0 #0000FF;
    bottom: 0;
    height: 600px;
    left: 40px;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.div1-1-1 {
    background: none repeat scroll 0 0 #008000;
    height: 40px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.div1-1-1-1 {
    background: none repeat scroll 0 0 #000000;
    height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    z-index: 999;
}

HTML Code:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
  <div class="overlay"></div>
    <div class="div1">div1
      <div class="div1-1">div1-1
        <div class="div1-1-1">
          div 1-1-1
          <div class="div1-1-1-1">
            1-1-1-1
          </div>
        </div>
      </div>
    </div>
    <!--<div class="overlay"></div>-->
  </body>

</html>

Please add comments if you have any other issue.

Regards D.

I see that you have removed z-index for 2 parents, but I cant do that, since I have a full fledge app running, so cant alter this. — whyAto8, Jul 30 '14 at 10:18
Oh okay, I will try to find an alternate solution without removing z-index. — DevangKantharia, Jul 30 '14 at 10:30

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

It seems z-index is always inherited from parent, more details in this SO question.

One way is to remove the z-index of parent divs and add only to the required div. Plunk here

Another is to have it has a sibling instead of child. And update the z-index accordingly.

Plunk

<div class="div1">div1
  <div class="div1-1">div1-1
    <div class="div1-1-1">
      div 1-1-1

    </div>
  </div>
</div>
<div class="div1-1-1-1">
        1-1-1-1
      </div>
<div class="overlay"></div>

CSS Change

.div1-1-1-1 {width:40px; height:40px; background:black; position:absolute; right:100px; top:0;z-index:1010;}

edited May 23 '17 at 11:57

Community

1
1

answered Jul 30 '14 at 09:48

Baga

1,354
13
24

structure is disturbed..please check it again. – DevangKantharia Jul 30 '14 at 09:48
@Baga - I cant neither remove parent z-index nor place it as sibling. – whyAto8 Jul 30 '14 at 10:08
@whyAto8 Oh interesting.have voted up your question..hope someone would come up with the solution you are looking for. – Baga Jul 30 '14 at 10:37
Thanks Baga, lets hope there is a solution for this. – whyAto8 Jul 30 '14 at 10:38

DevangKantharia · Answer 3 · 2014-07-30T11:18:10.593

I am sending another solution, which only alters the structure, and that does not remove the z-indexes of any elements.

JS Fiddle Code

HTML Code:

<div class="overlay"></div>
<div class="div1">div1
    <div class="div1-1">div1-1
        <div class="div1-1-1">div 1-1-1
            <!--<div class="div1-1-1-1">1-1-1-1</div>-->
        </div>
    </div>
    <div class="div1-1-1-1">1-1-1-1</div>
</div>

CSS Code:

body {
    color:#fff;
}
.overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#000;
    opacity:.5;
    z-index:1005;
}
.div1 {
    width:100%;
    height:600px;
    background:red;
    position:relative;
}
.div1-1 {
    width:auto;
    height:600px;
    background:blue;
    position:absolute;
    z-index:2;
    left:40px;
    top:0;
    bottom:0;
    right:0;
}
.div1-1-1 {
    width:100%;
    height:40px;
    background:green;
    position:absolute;
    z-index:15;
    top:0;
    right:0;
    left:0;
}
.div1-1-1-1 {
    width:40px;
    height:40px;
    background:black;
    position:absolute;
    right:0;
    top:0;
    z-index: 9999;
}

Notable Points:

You have to add the division <div class="div1-1-1-1">1-1-1-1</div> as a child of <div class="div1"> instead of <div class="div1-1-1"></div>
Class .div1-1-1-1 should be given equal or higher z-index than .overlay class.

You can do this by simply changing the layout structure by HTML, or by jQuery.

If you have any other query then please add comment below.

Regards D.

thanks for that, but unfortunately, i cant alter the html structure either. :-( — whyAto8, Jul 30 '14 at 15:02
Awesome, then you will need to mention all the points in that are to be considered, like "structure cannot be changed" and "z-index cannot be removed from the parents or any div" — DevangKantharia, Jul 31 '14 at 08:28

z-index - getting deep nested element to the front

3 Answers3