Painting and stacking layers before, during and after a transition that produces a transformation (transform)

Transformed elements create a stacking context (like position: relative and z-index: 0). This can cause differences in layering when a transition is in a before or after state compared to when the transitions is occurring. Changing the source order of the elements or giving particular elements (those that are not in a transformed state) position: relative will result in differences in painting order. please note also that transformed elements create a new containing block, thus absolutely positioned elements will be positioned in respect to this containing block.

Float (1)
ap. (2)
rp. (3)
Float (1)
ap. rp. (2)
rp. (3)
Float (1)
rp. (2)
ap. (3)
Float (1)
rp. (2)
ap. rp. (3)

The below examples show what happens if the transition causes opacity. The only difference is opacity does not establish a new containing block.

Float (1)
rp. (2)
ap. (3)
Float (1)
rp. (2)
ap. rp. (3)

Please see this test page about positiong and z-index.