# Draw order. Algorithm

From: Ruslan Fayzrakhmanov <ruslanrf@gmail.com>
Date: Fri, 26 Nov 2010 21:36:43 +0100
Message-ID: <AANLkTin1jYWe6a1Rqkga5TxXKHwEzzsUhAM8jN2ATM70@mail.gmail.com>

```Hi!

I have a question about draw order. In Appendinx E (
http://www.w3.org/TR/CSS21/zindex.html) of CSS 2.1 specification, the
algorithm of drawing elements is unclear for me.

As I understand about drawing order for current SC:

- we draw current element that creates a new Stacking Context (SC). It
can be root element *(1)*. If the element is a block, list-item or table
*(2)*, we draw them in appropriate to their type way.
- *(3)* After that we draw all its Stacking Contexts (SCs), which has
z-index<0. The sequence of the SCs is ordered according their
z-index (in ascending
order) and their "*tree order*".
- *(4)* We draw all non-positioned block-level descendant (from normal
flow = in-flow) of current element (curr. element creates new SC). All these
elements should belong to the current SC. If the block-level is a table, we
draw it as a table.
- *(5)* We draw all floats which are non-positioned and with opacity=1.
All it's descendant elements which do not create a new SC belongs to this
element. All it's nearest descendant elements which create new SC belongs to
the current SC.
- *(6) all in-line elements which generate new SC. Is it elements with
opacity<1? How to get this elements?*
- *(7) What do we draw?*
- *(8)* We draw all positioned elements with z-index="auto" or 0 as well
as all elements with opacity<1. Positioned element with z-index=auto and
opacity=1 does not create new SC. All it's descendant elements which do not
create a new SC belongs to this element. All it's nearest descendant
elements which create new SC belongs to the current SC.
- (9) All positioned elements with z-index>0
- (10) We draw outlines for the elements which do not have them yet.

I do not inderstand the steps 6 and 7. Could you please explain them?
Especially, sub-steps in 7.2.1.4.1.1.

I also do not know these concepts: "block * equivalent* element",
"block-level *replaced* element", "underlining"/"deepest element's
underlining".