1

I'm trying to position an element above an element having z-index greater than it's parent, as the title says.

For example, I have the following HTML:

HTML:

<div class="line">
    <div class="info"></div>
</div>
<div class="box"></div>

and CSS:

body {
    margin: 50px;
}

.box {
    background: grey;
    width: 500px;
    height: 40px;
    z-index: 10;
    position: relative;
}

.line {
    background: blue;
    width: 500px;
    height: 5px;
    z-index: 9;
    position: relative;
    top: 0;
    overflow: visible;
}

.line .info {
    width: 50px;
    height: 25px;
    background: red;
}

As you can see in this jsfiddle the red line (.info) is actually supposed to be in the shape of a larger rectangle, but the reason you don't see it is because it's hidden behind the grey .box.

How would I change the z-index's around so that the red box shows above the grey box, and the blue .line stays behind the grey box?

T J
  • 42,762
  • 13
  • 83
  • 138
user3390776
  • 61
  • 2
  • 7

2 Answers2

0

If you place the z-index for .line higher than that of .box, this will cause the red box to show over the grey one:

.box{
    z-index: 1
}
.line {
    z-index: 2
}

That should fix it.

Edited: move the .info div outside of .line E.g.

HTML:

<div class="line"></div>
<div class="info"></div>
<div class="box"></div>

Css:

.box {
    z-index:10;
}
.line {
    z-index:9;
}
.box {
    z-index:11;
}
benfes
  • 215
  • 1
  • 6
  • `.line` needs to be behind `.box`. – user3390776 Mar 12 '14 at 21:36
  • Ok well the problem is then the structure of your html code, because the redbox(.info) sits inside the .line element it has a z-index relative to this container. So what you will need to do is move .info outside the .line element that way it will be on the same level as the .box element and be able to have it's z-index compared to the other elements. – benfes Mar 12 '14 at 21:46
0

From CSSTricks z-index:

Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.

This is exactly what you're trying to do. If you want .line to be behind .box, it's child .info can never appear of top of .box, because it's parent itself is behind it.

For achieving what you want, you should alter your HTML structure so that .info is outside .line.

For example:

.box {
  position: relative;
  z-index: 1;
  width: 500px;
  height: 40px;
  background: grey;
}
.box .info {
  width: 50px;
  height: 25px;
  background: red;
}
.line {
  position: relative;
  top: 45px;
  width: 500px;
  height: 50px;
  background: blue;
}
<div class="line"></div>
<div class="box">
  <div class="info"></div>
</div>
T J
  • 42,762
  • 13
  • 83
  • 138
  • `.line` needs to be behind `.box`. – user3390776 Mar 12 '14 at 21:38
  • with your current markup, i don't think it is possible to put .line behind .box and .info infront of .box at the same time using z-index since .info is a child of .line,for doing so set the .info outside your current markup and position it behind .box, then apply a lower z-index than .box. – T J Mar 12 '14 at 21:49