Html order of rendering
- Thread starter upside
- Start date
z-index is absolutely nothing to do with the element "rendering" order. ( as your title suggests) What you are talking about is the normal flow of elements, and
With no POSITIONING and therefore no stacking order (z-index) changes, all elements will be in the same plane (0).
If positioning is used on any particular element the plane value will be increased by 1 so siblings before AND after that one in the flow will be on a plane above
My relative positioning demo should help to illustrate that concept.
You need to visualise the document as a "tower block", with the normal flow elements being in a plane that equates to the "ground floor" and the values of z-index change the plane (floor number) that elements are in.
Floating an element puts it into a different plane from positioned and static elements so elements in the "float plane" can ignore the normal flow and "slide" or "float" to the top edge of the document. so in our tower model "floats" are at the left and right edges but OUTSIDE the building. if that makes sense.
And I bet you thought that was an easy question.
Last edited:
Brian Angel
Member
Yeah I'm with you. That was some rambling right there. Basicly documents read from top to bottom, unless a float is used. Document wil still read the same, but the element is taken out of the normal flow and displayed diffrently. Was that really so hard???? Ignore that plane stuff, has nothing to do with the question you asked and has more to do with stacking order.
Brian Angel
Member
So... Div positioned relative, link inside positioned absolute. The link will be positioned absolute to the relative object, in his case being the div. Remove the relative position of the div, the link will then be positioned absolute of the next relative object moving UP the DOM, in this case, since nothing else was named, it will be the <html>.
Here:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Do yourself a favor, dont DON'T overuse positioning and use it only when you really, REALLY need to as it can start to make you page render in odd ways that you don't want it to.
Here:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Do yourself a favor, dont DON'T overuse positioning and use it only when you really, REALLY need to as it can start to make you page render in odd ways that you don't want it to.
Last edited:
If you take a look at this example http://www.upsidecreative.com.au/stack test.html
the green box, which is lower on the HTML page, appears above the pink box, although they are both absolutely positioned with no ancestors ???
g
the green box, which is lower on the HTML page, appears above the pink box, although they are both absolutely positioned with no ancestors ???
g
in case it hasnt been made very clear to you.
an absolute positioned element is taken out of the document flow.
therefore
pink 200px x 200px box is absolute positioned top 0 left 0
which is where it goes.
green 100px x 100% box is absolute positioned top 0 left 0.
let me just reiterate, absolute elements are taken out of the document flow
therefore...
blue 100px x 100px box absolute positioned top 0 left 0 will also sit on top of the green, and pink boxes.
an absolute positioned element is taken out of the document flow.
therefore
pink 200px x 200px box is absolute positioned top 0 left 0
which is where it goes.
green 100px x 100% box is absolute positioned top 0 left 0.
let me just reiterate, absolute elements are taken out of the document flow
therefore...
blue 100px x 100px box absolute positioned top 0 left 0 will also sit on top of the green, and pink boxes.
yep and for clarification.
#pink is 200px in length, #green is only 100px therefore 100px of #pink is UNDERNEATH #green and therefore is obscured.
In the tower block analogy #pink is on the ground floor and #green is on a floor above.
If you use any developer plugins to your browser, edit the CSS to give #pink a z-index of 1 or more.
The "old fashioned" (Netscape) way of naming divs as layers is a good way of looking at it and the layer stacking order is from the normal flow start, (after the <body> open tag and increases by one following each BLOCK element close tag in the flow that is a direct ancestor of the body.
So
HTML:
<body> << start of layer level 0
<div>
<div>
</div> << this tag is NOT being a direct ancestor of body so does NOT alter the stack level
</div> << plus one (level 1)
<p>
</p> <<< plus one (level 2)
</body> << end of flow.Each block element ALSO has a flow of it's own that works exactly the same way and ends at the parent close tag.