{"database": "24ways-fts4", "table": "articles", "is_view": false, "human_description_en": "where \"published\" is on date 2005-12-16", "rows": [[325, "\"Z's not dead baby, Z's not dead\"", "While Mr. Moll and Mr. Budd have pipped me to the post with their predictions for 2006, I\u2019m sure they won\u2019t mind if I sneak in another. The use of positioning together with z-index will be one of next year\u2019s hot techniques \n\nBoth has been a little out of favour recently. For many, positioned layouts made way for the flexibility of floats. Developers I speak to often associate z-index with Dreamweaver\u2019s layers feature. But in combination with alpha transparency support for PNG images in IE7 and full implementation of position property values, the stacking of elements with z-index is going to be big. I\u2019m going to cover the basics of z-index and how it can be used to create designs which \u2018break out of the box\u2019.\n\nNo positioning? No Z!\n\nRemember geometry? The x axis represents the horizontal, the y axis represents the vertical. The z axis, which is where we get the z-index, represents /depth/. Elements which are stacked using z-index are stacked from front to back and z-index is only applied to elements which have their position property set to relative or absolute. No positioning, no z-index. Z-index values can be either negative or positive and it is the element with the highest z-index value appears closest to the viewer, regardless of its order in the source. Furthermore, if more than one element are given the same z-index, the element which comes last in source order comes out top of the pile. \n\nLet\u2019s take three
s.\n\n
\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!", "2005", "Andy Clarke", "andyclarke", "2005-12-16T00:00:00+00:00", "https://24ways.org/2005/zs-not-dead-baby-zs-not-dead/", "design"]], "truncated": false, "filtered_table_rows_count": 1, "expanded_columns": [], "expandable_columns": [], "columns": ["rowid", "title", "contents", "year", "author", "author_slug", "published", "url", "topic"], "primary_keys": [], "units": {}, "query": {"sql": "select rowid, title, contents, year, author, author_slug, published, url, topic from articles where date(\"published\") = :p0 order by rowid limit 101", "params": {"p0": "2005-12-16"}}, "facet_results": {"published": {"name": "published", "type": "date", "results": [{"value": "2005-12-16", "label": "2005-12-16", "count": 1, "toggle_url": "https://datasette-sqlite-fts4.datasette.io/24ways-fts4/articles.json?_facet_date=published", "selected": true}], "hideable": true, "toggle_url": "/24ways-fts4/articles.json?published__date=2005-12-16", "truncated": false}}, "suggested_facets": [], "next": null, "next_url": null, "private": false, "allow_execute_sql": true, "query_ms": 60.02975200021865, "source_url": "https://github.com/simonw/sqlite-fts4"}