Can I position an inner element below its parent?

Question

It seems that with markup like http://jsfiddle.net/nwekR/

<div id="container">
    Outer Div
    <div id="inner">Inner Div</div>
</div>

and CSS like

#container {
    position: relative;
    z-index: 6;
}
#inner {
    position: absolute;
    z-index: 4;
}

#inner is still above #container can I have #inner below?

score 4 · Answer 1 · answered Mar 21 '11 at 05:16

No.

The CSS 2.1 spec states this standard of painting elements:

the background and borders of the element forming the stacking context.
the child stacking contexts with negative stack levels (most negative first).
the in-flow, non-inline-level, non-positioned descendants.
the floating descendants.
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
the child stacking contexts with stack level 0, and the positioned descendants with 'z-index: auto'.
the child stacking contexts with positive stack levels (least positive first).

Given these rules and your HTML, #container is creating the stacking context for the element #inner, which means #container has to be rendered first.

Other people have already posted alternative HTML/CSS to get the effect you desired, but if you want to know more about why what you want isn't possible, here is the documentation:

http://www.w3.org/TR/CSS21/visuren.html#layers

score 1 · Accepted Answer · answered Mar 21 '11 at 05:10

1

You just need to put it outside of inner element when it comes to HTML. Here's your solution: http://jsfiddle.net/nwekR/23/

<div id="container">
    Outer Div
</div>
<div id="inner">Inner Div</div>

answered Mar 21 '11 at 05:10

Frantisek

7,485
15
59
102

This works, but you've lost the "grouping of the elements". How would you go about adding a style [like this](http://jsfiddle.net/nwekR/25/)? *(based off my answer)* – thirtydot Mar 21 '11 at 05:17
I don't get the question. What style do you need to add? And into which revision? – Frantisek Mar 21 '11 at 05:23
1

Firstly: I'm not the person who asked the question. Secondly, that was just an example of something you *can't do* with your answer. When I say you've `lost the "grouping of the elements"`, I mean you can't, (for example!) add `width: 50%` to the container div and expect the inner div to behave as you'd expect. [`width: 50%` your answer](http://jsfiddle.net/nwekR/27/) vs [`width: 50%` my answer](http://jsfiddle.net/nwekR/28/). – thirtydot Mar 21 '11 at 05:27
This is not the answer to the question – Hrvoje Golcic Oct 12 '18 at 07:00

score 1 · Answer 3 · answered Mar 21 '11 at 05:11

1

#container {
    background: yellow;   
    position: relative;
    height: 100px;
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    z-index: 6;
}
#inner {
    background: orange;
    position: absolute;
    z-index: 4;
    width: 100px;
    height: 50px;
    top: 180px;
    right: 0;
    padding-top: 20px;
}

answered Mar 21 '11 at 05:11

thenengah

42,557
33
113
157

I guess i don't understand below. Doesn't just increasing the position to the top put it below? – thenengah Mar 21 '11 at 05:44
I think he means below as in `z-index` style "underneath", not below as in "vertically lower down". – thirtydot Mar 21 '11 at 05:46
1

@thirthdot - oh, you mean under, or wait, below, damnit! – thenengah Mar 21 '11 at 05:52

score 1 · Answer 4 · answered Mar 21 '11 at 05:13

The cleanest solution is to add an extra wrapper element, and to move #inner outside #container.

The extra wrapper element is given position: relative, so everything else should be the same as it was before, with the exception that #inner is underneath #container.

Live Demo

Mike Lewis · Answer 5 · 2011-03-21T05:18:19.510

0

It is not possible(in it's current state of having inner a child of container) because when the browser renders the DOM, it goes from top down on the DOM tree, and there is no way to draw under something that has already been drawn(i.e. drawing the parent before child).

You can read more about the z-index here.

There are ways of accomplishing(by changing the html around) this however, you can see thirtydot's solution.

edited Mar 21 '11 at 05:18

answered Mar 21 '11 at 05:09

Mike Lewis

63,433
20
141
111

You're right if you mean that "it's not possible *[without making changes to the HTML]*". Otherwise, see my answer. – thirtydot Mar 21 '11 at 05:15
No, he's rigorously right : the question is "render an element below its container". And that's impossible. You're (as you stated) are forced to change the relationship between the elements to put #inner below #container. – Pierre-Olivier Vares Dec 12 '14 at 16:27
"it goes from top down on the DOM tree" is by against not exact : dom elements are not just drawn from top to bottom : siblings are drawn in the order of their z-index (and in top-to-bottom order if z-index are equal). (But it only applies to *siblings* - so that doesn't change anything related to the question). – Pierre-Olivier Vares Dec 12 '14 at 16:43

Can I position an inner element below its parent?

5 Answers5