CODEWITHSUNDEEP
htmlcssz-indexopacity
nathan hartmann
nathan hartmann

Reputation: 95

Problems with z-index with opacity in HTML5 and CSS3

Ok, I have a link to the JSFIDDLE below. I have been working on just a rough exterior of a site and I have seem to come across a weird issue with opacity and z-index. I have done some reading but still fail to understand wholly why opacity effects my z-index in this way when rendering. When my drop down menu comes down, the z-index is behind the contents page until after the transition effect is over. Any reason why this is happening?

    *{  
    background:#ffffff;
    color:#0099ff;
    margin:0 auto;
    text-align:center;
    padding:0;
    }
    .container{
    width:relative;
    margin:0 auto;
    min-width:775px;
    }
    .banner{
    position:relative;
    min-height:50px;
    max-height:200px;
    margin-left:100px;
    margin-right:100px;
    }
    .menu{

    z-index:1;
    }
    .menu ul /* main UL */{

    list-style:none;
    margin:0;
    padding:0;
    z-index:30;
    background:#000000;
    opacity:.2;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
    }
    .menu ul:hover /* main UL Hover*/{
    z-index:3;
    opacity:1;
    }
    .menu ul li /* main LI */{
    color:#000000;
    font: bold 12px/18px sans-serif;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background: #ffffff;
    border-radius:6px;
    cursor: pointer;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
    }
    .menu ul li:hover /* main LI hover function */{
    background:#9fff80;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
    }
    .menu ul li ul /* secondary UL */{
    background: #ffffff;
    position: absolute;
    top: 47px;
    left: 0px;
    display: none;
    opacity: 0;
    visibility: hidden;
    }
    .menu ul li ul li /* secondary LI */{
    width:100px;
    padding: 15px 20px;

    }
    .menu ul li:hover ul /* secondary LI function hover over main LI */{
    display: block;
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
    }
    .contents{
    z-index:0;
    border-radius: 6px;
    position:relative;
    min-height:100px;
    margin-top:20px;
    width:1000px;
    padding:20px;
    }
    <html>
    <head>
    <link rel="stylesheet" href="CSS/main.css" type="text/css" charset="utf-8" />
    </head>
    <header>
    <meta name="Author" content="Nathan Hartmann">

    </header>
    <body>
    <div class="container"> <!-- Main Container -->
    <div class="banner"><img src="pictures/bannerTestPage.jpg"></div>
    <div class="menu"> <!-- Menu Container -->
    <ul> <!-- Main UL -->
    <li onclick="top.location.href='#'">Home</li> <!-- Main LI -->
    <li onclick="top.location.href='#'">Photos <!-- Main LI -->
        <ul> <!-- Secondary UL -->
            <li onclick="top.location.href='#'">Family</li> <!-- Secondary LI -->
            <li onclick="top.location.href='#'">Nature</li> <!-- Secondary LI -->
            <li onclick="top.location.href='#'">Personal</li> <!-- Secondary LI -->
        </ul> <!-- Secondary UL END -->
    </li> <!-- Main LI END -->
    <li onclick="top.location.href='#'">Shopping</li> <!-- Main LI -->
    <li onclick="top.location.href='#'"> Contact</li> <!-- Main LI -->
    </ul> <!-- Main UL END -->
    </div> <!-- Menu Container END -->
    <div class="contents"> <!-- Contents Container -->

    </div> <!-- Contents Container END -->
    </div> <!-- Main Container END -->
    </body>
    </html>

Upvotes: 2

Views: 1789

Answers (1)

QoP
QoP

Reputation: 28397

That's happening because .menu property position is set to static instead of relative.

Change 

.menu{
    z-index:1;
}

to

.menu{
  position:relative;
  z-index:1;
}

jsfiddle

Upvotes: 2

Related Questions