SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    does z-index affect forward or backward?

    i'm trying to construct an image gallery using modified code (below) from the dd css library, and i want to position the hover image so that it appears in a specified place, but a fluid page.

    can i do this using z-index, and if so does a dive with a z-index rule of, say, 50, parent everything in behind layers (1-49) or in front layers (51+)...or neither because it depends on when/where it is called in the HTML?

    and what would the position statement be? i've already tried positioning it relative, but that messes with the thumbnail layout.

    Code:
    /* CSS Document */
    <!-- Source: Dynamic Drive CSS Library -->
    <!-- URL: http://www.dynamicdrive.com/style/ -->
    .gallerycontainer{
    position: relative;
    height: 60px;
    padding: 0px 4px 0px 8px;
    text-align: justify;
    z-index: 100;
    width: 732px;
    margin-left: -1px;
    
    }
     
    .thumbnail img{
    border: 1px solid #ffffff;
    margin: 1px 1px 2px 1px;
    }
     
    .thumbnail:hover{
    background-color: transparent;
    }
     
    .thumbnail:hover img{
    border: 1px solid #ffffff;
    }
     
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    height: auto;
    width: auto;
    background-color: #f7f8f9;
    padding: 0px;
    /*b1b7cf f7f8f9 000333*/
    border: 1px solid #b1b7cf;
    visibility: hidden;
    color: #000333;
    text-decoration: none;
    padding: 3px 3px 3px 3px;
    }
     
    /*.thumbnail span p{
    color: #ffffff;
    text-decoration: none;
    margin-bottom: 12px;
    }*/
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0px;
    margin-bottom: 3px;
    }
     
    .thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 0;
    top: auto;
    left: auto; /*position where enlarged image should offset horizontally */
    z-index: 50;
    }
    thanks for any advice! :-)

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

    Z-index works from zero to infinity where zero is further away from the viewer and the higher the number the closer it is to the viewer. (you can use negative numbers for z-index but they are treated differently by various browsers so its best to avoid them.)

    To overlay one element on another you would simply give it a higher z-index than the element below.

    Where nested elements are concerned it is the parent of these nested elements that determine the stacking context in relation to other elements outside the nesting. If you have a parent with a z-index of 20 and its child has a z-index of 10000, then that child will only overlay elements within its own stacking context of lesser numbers but will not overlay other elements (outside the current nesting) unless the parents of those other elements has a z-index less than 20.

    Only positioned elements gain a stacking context for z-index and usually you would just use position:relative without any co-ordinates to gain a stacking context. You will very rarely use relativeositioning with co-ordinates unless its for a special effect.

    (Note than in most complicated situations IE is a little buggy and often gets it all wrong)

    If you want an image to pop up in another position on rollover then you would need to use absolute positioning most likely. Z-index will ony be an issue if the element you want the image to appear above has a stacking context higher than that of the image (and its parent).

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so in the following case i can position the placement of the hover pop-up based on the location of the #bodyContent div?

    or would it be absolute based on the .thumbnail class location?



    Code:
    <div id="bodyContent">
    
    <p>
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001126t.jpg" border="0" height="72" width="72" />&nbsp;<span><img src="../../../images/specOlympics062006/P0001126.jpg" height="216" width="360" /><br />
    &nbsp;Test Caption</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001128t.jpg" border="0" height="72" width="72" />&nbsp;<span><img src="../../../images/specOlympics062006/P0001128.jpg" height="216" width="360" /><br />
    &nbsp;Test Caption</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001129t.jpg" border="0" height="72" width="72" />&nbsp;<span><img src="../../../images/specOlympics062006/P0001129.jpg" height="360" width="216" /><br />
    &nbsp;Test Caption</span></a>
    
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001131t.jpg" border="0" height="72" width="72" /><br /><span><img src="../../../images/specOlympics062006/P0001131.jpg" height="216" width="360" /><br />
    &nbsp;Test Caption</span></a>
    
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001136t.jpg" border="0" height="72" width="72" />&nbsp;<span><img src="../../../images/specOlympics062006/P0001136.jpg" height="360" width="216" /><br />
    &nbsp;Test Caption</span></a>
    
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001137t.jpg" border="0" height="72" width="72" />&nbsp;<span><img src="../../../images/specOlympics062006/P0001137.jpg" height="216" width="360" /><br />
    &nbsp;Test Caption</span></a>
    
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001138t.jpg" border="0" height="72" width="72" />&nbsp;<span><img src="../../../images/specOlympics062006/P0001138.jpg" height="360" width="216" /><br />
    &nbsp;Test Caption</span></a>
    
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001139t.jpg" border="0" height="72" width="72" /><br />
    <span><img src="../../../images/specOlympics062006/P0001139.jpg" height="360" width="216" /><br />
    &nbsp;Test Caption</span></a>
    
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001140t.jpg" border="0" height="72" width="72" />&nbsp;<span><img src="../../../images/specOlympics062006/P0001140.jpg" height="216" width="360" /><br />
    &nbsp;Test Caption</span></a>
    
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001141t.jpg" border="0" height="72" width="72" />&nbsp;<span><img src="../../../images/specOlympics062006/P0001141.jpg" height="360" width="216" /><br />
    &nbsp;Test Caption</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001143t.jpg" border="0" height="72" width="72" />&nbsp;<span><img src="../../../images/specOlympics062006/P0001143.jpg" height="216" width="360" /><br />
    &nbsp;Test Caption</span></a>
    
    
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001145t.jpg" border="0" height="72" width="72" /><br />
    <span><img src="../../../images/specOlympics062006/P0001145.jpg" height="216" width="360" /><br />
    &nbsp;Test Caption</span></a>
    
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001147t.jpg" border="0" height="72" width="72" />&nbsp;<span><img src="../../../images/specOlympics062006/P0001147.jpg" height="360" width="216" /><br />
    &nbsp;Test Caption</span></a>
    
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001148t.jpg" border="0" height="72" width="72" />&nbsp;<span><img src="../../../images/specOlympics062006/P0001148.jpg" height="360" width="216" /><br />
    &nbsp;Test Caption</span></a>
    
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001149t.jpg" border="0" height="72" width="72" />&nbsp;<span><img src="../../../images/specOlympics062006/P0001149.jpg" height="216" width="360" /><br />
    &nbsp;Test Caption</span></a>
    
    
    <a class="thumbnail" href="#thumb"><img src="../../../images/specOlympics062006/P0001150t.jpg" border="0" height="72" width="72" />&nbsp;<span><img src="../../../images/specOlympics062006/P0001150.jpg" height="216" width="360" /><br />
    &nbsp;Test Caption</span></a>
    
    </p>
    
    </div> <!-- end bodyContent--!>
    if i understand things correctly, i want it to be absolutely poistioned inside #body content, because that is a fluid div and the pop-up will move as the div scales. i.e.:

    Code:
    #bodyContent {
    	float: right;
    	width: 76%;
    	margin-top: 9px;
    	margin-right: -6px;
    	padding-bottom: 12px;
    	align: center;
    	border: 0px #000000 solid;
    }
    (with #bodycontent and other page element divs being relatively positioned inside #container.)

    positioning it based on .thumbnail will lock it to a specific position on the page, yes?

    thanks again

  4. #4
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have a parent with a z-index of 20 and its child has a z-index of 10000, then that child will only overlay elements within its own stacking context of lesser numbers but will not overlay other elements (outside the current nesting) unless the parents of those other elements has a z-index less than 20.
    so, let's say that parent is positioned top 10, left 10. if the child is given an absolute position of, say, top 10 left 10, will it display at top 10, left 10 from the wrapper, or at top 20 left 20? and in the process overlay everything less than 10000 inside the parent and less that 20 outside the parent.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    if i understand things correctly, i want it to be absolutely poistioned inside #body content, because that is a fluid div and the pop-up will move as the div scales. i.e.:
    Elements are ploaced in relation to their parent when that parent has a position:defined. If the parent has no position defined then the nearest ancestor with a position defined will be the start position. If no ancestor has a position defined then the root element (html) is the starting position.

    If you add position:relative to #bodyContent then the position of the absolute child elements will be in relation to the top left corner of #bodyContent (assuming they are not nested within other positioned elements).
    Code:
    #bodyContent { float: right; width: 76%; margin-top: 9px; margin-right: -6px; padding-bottom: 12px; /*align: center; this is not css - perhaps you meant text-align:center */ border: 0px #000000 solid; position:relative;
    }


    so, let's say that parent is positioned top 10, left 10. if the child is given an absolute position of, say, top 10 left 10, will it display at top 10, left 10 from the wrapper,


    Yes it will display in relation to its wrapper (as long as position:relative or position:absolute is in force) wherever that wrapper may be. If it was a centred wrapper then the absolute element would still maintain its integrity within that wrapper and move with it etc.


    and in the process overlay everything less than 10000 inside the parent and less that 20 outside the parent


    That's how it should work


    Of course as I mentioned there may be bugs in IE in certain instances so you need to keep an eye on things and check as you go.

  6. #6
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahhh, gotcha, (i think.)

    ultimately, if nothing has a position:value designation, it will place the absolute values of top 10, left 10 relative to the top, left corner of the page as displayed in the browser window.

    if i give the wrapper a position value it goes from there. and if i position the bodyCopy div, it overrides the wrapper info (if any) and measures from top, left of bodyCopy.

    'k, i'm off to play with my CSS now...

    thanks! :-)

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You seem to have got it


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
  •