s.\n\n

\n\n #one { \n position: relative; \n z-index: 3;\n }\n\n #two { \n position: relative; \n z-index: 1;\n }\n\n #three {\n position: relative; \n z-index: 2;\n }\n\n\n\nAs you can see, the

with the z-index of 3 will appear closest, even though it comes before its siblings in the source order. As these three

s have no defined positioning context in the form of a positioned parent such as a

, their stacking order is defined from the root element . Simple stuff, but these building blocks are the basis on which we can create interesting interfaces (particularly when used in combination with image replacement and transparent PNGs).\n\nBrand building\n\nNow let\u2019s take three more basic elements, an

,
and
, all inside a branding
which acts a new positioning context. By enclosing them inside a positioned parent, we establish a new stacking order which is independent of either the root element or other positioning contexts on the page.\n\n
\n
Worrysome.com
\n
Don' worry 'bout a thing...
\n
Take the weight of the world off your shoulders.
\n
\n\nApplying a little positioning and z-index magic we can both set the position of these elements inside their positioning context and their stacking order. As we are going to use background images made from transparent PNGs, each element will allow another further down the stacking order to show through. This makes for some novel effects, particularly in liquid layouts.\n\n(Ed: We\u2019re using n below to represent whatever values you require for your specific design.) \n\n#branding {\n position: relative;\n width: n;\n height: n;\n background-image: url(n);\n }\n\n #branding>h1 {\n position: absolute;\n left: n;\n top: n;\n width: n;\n height: n;\n background-image: url(h1.png);\n text-indent: n;\n }\n\n #branding>blockquote {\n position: absolute;\n left: n;\n top: n;\n width: n;\n height: n;\n background-image: url(bq.png);\n text-indent: n;\n\n }\n\n #branding>p {\n position: absolute;\n right: n;\n top: n;\n width: n;\n height: n;\n background-image: url(p.png);\n text-indent: n;\n }\n\nNext we can begin to see how the three elements build upon each other.\n\n\n1. Elements outlined\n\n\n2. Positioned elements overlayed to show context\n\n\n3. Our final result\n\nMultiple stacking orders\n\nNot only can elements within a positioning context be given a z-index, but those positioning contexts themselves can also be stacked.\n\n\nTwo positioning contexts, each with their own stacking order\n\nInterestingly each stacking order is independent of that of either the root element or its siblings and we can exploit this to make complex layouts from just a few semantic elements. This technique was used heavily on my recent redesign of Karova.com.\n\nDissecting part of Karova.com\n\nFirst the XHTML. The default template markup used for the site places
and
as siblings inside their container.\n\n
\n
\n
\n
\n
\n
\n
\n\nBy giving the navigation
a lower z-index than the content
we can ensure that the positioned content elements will always appear closest to the viewer, despite the fact that the navigation comes after the content in the source.\n\n#content { \n position: relative; \n z-index: 2; \n }\n\n #nav_main { \n position: absolute; \n z-index: 1; \n }\n\nNow applying absolute positioning with a negative top value to the
and a higher z-index value than the following
ensures that the header sits not only on top of the navigation but also the styled paragraph which follows it.\n\nh2 {\n position: absolute;\n z-index: 200;\n top: -n;\n }\n\n h2+p {\n position: absolute;\n z-index: 100;\n margin-top: -n;\n padding-top: n;\n }\n\n\nDissecting part of Karova.com\n\nYou can see the full effect in the wild on the Karova.com site.\n\nHave a great holiday season!", "year": "2005", "author": "Andy Clarke", "author_slug": "andyclarke", "published": "2005-12-16T00:00:00+00:00", "url": "https://24ways.org/2005/zs-not-dead-baby-zs-not-dead/", "topic": "design"}