css stacking order, z-index

Question

I can't for the life of me figure out how to get the red on top without changing the html structure.

How do I get the red on top? I've red every combination of z-index values and position, etc.

The HTML:

<div id="red">
    <div id="green"></div>
</div>

The CSS:

div {
    width: 300px;
    height: 300px
}
#red {
    background: red;
    z-index: 10;
    position: relative;
}
#green {
    background: green;
    width: 290px;
    z-index: -10
}

I think you have to change the HTML structure...you could do that with Javascript if changing the original HTML is difficult. — Matt Browne, May 31 '13 at 02:20
recommend these articles on z-index: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ and http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ — Kevin Nacios, May 31 '13 at 02:29

score 4 · Accepted Answer · answered May 31 '13 at 02:22

4

Remove the Z-Index from the parenting element and give both elements the same position: rule.

Proof of concept: http://jsfiddle.net/GSBtG/2/#update

answered May 31 '13 at 02:22

Chris S.

1,199
11
25

It would work. You can disregard the 25. I just do larger steps in case I ever need to place something between two elements. – Chris S. May 31 '13 at 02:25
Upvoted this answer because it works. But I want just to point out that what happens is that green one is going behind the red one, not the red one in front of the green one which would be imposible to achieve. – pzin May 31 '13 at 02:30

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

1

Set a negative z-index on the child and remove the z-index on the parent.

#parent {
    position: relative;
}
#child {
    position: relative;
    z-index: -10;
}

jsFiddle

Source

edited May 23 '17 at 11:57

Community

1
1

answered May 31 '13 at 02:22

Zhihao

14,758
2
26
36

css stacking order, z-index

2 Answers2