Results 1 to 5 of 5

Thread: css opacity and z-index help

  1. #1
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question css opacity and z-index help

    Hi, this is probably a simple question, and maybe I'm overlooking something very basic. Would someone tell me why the z-index is not working for this example? I want the white box to be in front of the body background setting to black at 60%. If I remove the opacity property from the body background property, all is well, however, if I add it, the white box is dimmed by the opacity setting on the body background property. HTML and inline CSS follows:



    Code:
    <body style="background:#000; opacity:.6;">
    <div  style="border:1px solid #ccc;height:105px;z-index:2;background:#fff;" >
       	
        <p>this might take about one minute.</p>
        <p class="update"></p>
        <p>&lt;connecting...&gt;</p>        
    
     
    </div>
    </body>
    Thanks!

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    As far as I know, the z-index property is inherited by all child elements of the element with the property. Have a look here for a work around.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, Bernie. After reading the article you linked to, the body element is the parent to my white box div, thus the inheritance issue. So my expectation of z-index was wrong. I'll have to read up on it again. I was hoping to just use this snippet for a quick mockup demo purpose (I didn't want to use javascript/jquery lightbox, just html & inline css to quickly show a story), but I see that is not the case. To do that, I'll have to get the window size/s, create a separate div as the background and then place the white box div as its sibling -- also absolutely position the latter according to window size as well (right?). I suppose I'll just use the jquery lightbox as its quick. Thanks again I learned something today!

  4. #4
    Join Date
    Nov 2012
    Location
    The Netherlands
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The Z-Index property doesn't work at all when you don't define a position property.

  5. #5
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    342
    Thanks
    5
    Thanked 33 Times in 31 Posts

    Default

    True setting it to auto

Similar Threads

  1. Changing index.html to index.php TO-DO list
    By BillTheBuilder in forum Other
    Replies: 0
    Last Post: 03-09-2012, 08:37 PM
  2. Static Index page, with changing iframe pages w/o leaving index help
    By Wolfman72 in forum Looking for such a script or service
    Replies: 3
    Last Post: 04-12-2011, 03:19 PM
  3. Replies: 11
    Last Post: 06-01-2009, 12:12 AM
  4. index.php?display=... > index.php/view/id
    By jmh1988 in forum Looking for such a script or service
    Replies: 1
    Last Post: 10-21-2008, 04:19 PM
  5. Replies: 0
    Last Post: 08-05-2007, 09:32 PM

Tags for this Thread

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
  •