SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    what does z-index mean? do?

    z-indexSets the stack order of an elementauto
    number6.04.0CSS2

    i don't understand what this means? stacks what?
    silly question i know
    but thanks

  2. #2
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In 3-dimensional graphing (i.e. a 3D graph in Excel), the x-axis is the one that goes across the page; the y-axis is the one that goes up and down the page, and the z-axis is the one that goes "into" the page.

    In CSS, you can position 2 or more objects to overlap each other. Their z-indexes determine which objects are "in front of" or "behind" other objects that they overlap. The higher an object's z-index, the "higher in the stack" of objects it will display.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Briefly :The z-index sets the stacking level (order) of elements on the page. The lower the z-index the further down the stack the element will be. (A stack is just the term for elements on the page and which one is on top of the other one like a stack)

    Elements that are positioned on the page are usually displayed in the order that thay are in the html. e.g. the first element will overlap the second element. (assuming of course that areas of the element overlap). By setting the z-index you can control which element is on top and is wholly visible to the viewer.

    z-index applies to positioned elements and a parent element that has nested elements will have their z-index controlled by the parent (in relation to other elements outside the nest). Each child element may overlap any other of the child elements according to the z-index set but will only overlap other elements outside the nest if the value of theparent is greater.

    I think I've just made it sound more complicated than it is [img]images/smilies/wink.gif[/img]

    Paul
    Edit:


    ComputerBob beat me to it (and more eloquently as well )

  4. #4
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oohh... i think i get it... so basically if i have z-indexed my "column" on the right to be z-index:1 - THEN, when user re-sizes the window and the main & right columns overlap - this will cause the right one to be on top? neat thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •