SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: setting z order

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    setting z order

    Hi

    How do I set the order in my html file so that the video goes beneath my button?
    My order isn't working for me (attached screenshot).

    Below is my code:

    Code:
    <div id="home-content-3">
    <img src="images/btnVideo_off.jpg" style="z-index:999;" /><br/>
    <iframe style="margin-top:-20px;z-index:-1;" width="239" height="215" src="http://www.youtube.com/embed/3Ej00kzpAy0?hd=1&rel=1&autohide=0&showinfo=0" 
    frameborder="0" allowfullscreen></iframe>
    
    <br/><br/>
    <a href="#" target="_blank"><img src="images/TheBuzz.jpg" width="239" height="244" border="0" /></a>
    </div>
    Attached Images Attached Images

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

    Only positioned elements can have a z-index so if the element is not positioned add position:relative to it.

    Flash by default (youtube videos) also sits on top of the window so I believe you need to add the wmode parameter to the flash url.

    e.g.

    Code:
    <img src="images/btnVideo_off.jpg" style="z-index:2;position:relative;" /><br/>
    <iframe style="margin-top:-20px;position:relative;z-index:1;" width="239" height="215" src="http://www.youtube.com/embed/3Ej00kzpAy0?hd=1&rel=1&autohide=0&showinfo=0?wmode=transparent" 
    frameborder="0" allowfullscreen ></iframe>

  3. #3
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,013
    Mentioned
    62 Post(s)
    Tagged
    0 Thread(s)
    Another thing to keep in mind is z-index is scoped just like absolute positioning is scoped - that is no matter how high you set the z-index of an element, it will never appear in front of an element that has a higher z-index than a parent of the element your setting the z-index on. Consider the following.

    Code html:
    <nav style="position: relative; z-index: 1;">
      <div id="A" style="position: absolute; z-index: 100;">
    </nav>
    <div id="B" style="position: relative; z-index: 2;"></div>

    In the above, div "A" can never be in front of div "B" because, no matter how high it's z-index is set, the z-index of it's parent, nav, is lower than the z-index of div "B".


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
  •