Previous Message
Next Message

Re: z-index (was: [css-d] Anchors vanishing under fixed DIV at

Sent by Eric A. Meyer on 31 January 2002 10:10


At 7:06 -0800 1/31/02, Jason A. Ogle wrote:

>Can somebody enlighten me about what z-index is? how it works? why it
>is?

    Think of the horizontal axis of your monitor's surface as the 
x-axis, and the vertical as the y-axis.  You should now have a big 
cross (plus) sign on your monitor, conceptually speaking.  Now 
mentally draw a third axis perpendicular to the first two, so now 
there's a line that sticks out of your monitor, and also through it. 
That's the z-axis.
    'z-index' assigns elements to points along that line.  You give an 
element an integer value, and that's its place on the axis.   You can 
assign any integer the browser is capable of handling.  The higher a 
number, the "closer" it is to you as you sit facing the monitor.  The 
lower a number, the "further away" it is.  You can assign negative 
numbers, which are very low.  There is a temptation to think of '0' 
as the plane of the monitor itself, but that's not really the case. 
It's just another point on the line.
    By default, elements have a 'z-index' of 'auto'.  That does NOT 
correspond to '0' or any other number.  It basically means "in the 
event elements overlap, the browser should stack things as it sees 
fit."
    'z-index' exists because positioning made it possible for elements 
to overlap each other, so there needed to be a way to say which one 
was "on top" of another.  This can be useful for dynamic pages-- 
consider a layout where you have several elements that overlap, and 
the user clicking on the tab for each one brings it to the "top" of 
the stack.  You could use it to create a card game out of nothing but 
HTML, CSS, and DOM scripting.
    What's interesting is that if you position an element, it not only 
establishes a positioning context for its descendants, but also it 
own stacking context.  Consider:

    <div style="position: absolute; z-index: 10;">
      <div style="position: absolute; z-index: 50000;">
      </div>
    </div>
    <div stlye="position: absolute; z-index: 11;">
      <div style="position: absolute; z-index: -9876;">
      </div>
    </div>

Here's how they "stack":

    ^     11
    |     -9876
    |     50000
    |     10
  toward
   you


The descendant elements are grouped with their positioned ancestors. 
They are stacked in relation to the ancestor, but overlapped (or are 
overlapped by) all of the descendants of another ancestor-level 
element.
    I hope that was clear-- this concept is kind of a tricky one to 
explain.  As with a few concepts in CSS2, it's a lot easier to 
explain in the real world than in e-mail.

--
Eric A. Meyer (http://www.meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
   -- Martina Kosloff
Previous Message
Next Message

Message thread: