CODEWITHSUNDEEP
htmlcssz-index
Mike
Mike

Reputation: 3418

why is z-index not working for opacity?

I have two divs, on the outer div I have given an opacity of .1, and then I have an inner div that should not inherit the parent containers opacity property. But to avoid this what I did was to add a z -index property (higher to the child element) but it doesnt work. How do I avoid child div to inherit the opacity property of its parent container:

<!DOCTYPE HTMl>
<html>
    <head>  
        <style type="text/css">
            #outer{width:500px;height:400px;background:#000000;border:1px solid red;opacity:.1;z-index:1}
            #inner{width:450px;height:350px;background:#ffffff;margin: 0 auto;margin-top:20px;z-index:2}

        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Views: 2410

Answers (1)

defau1t
defau1t

Reputation: 10619

You can use rgba property to get this working. e-g below should work:

<!DOCTYPE HTMl>
<html>
    <head>  
        <style type="text/css">
            #outer{width:500px;height:400px;background:#000000;border:1px solid red;background:rgba(255,0,0,0.5);}
            #inner{width:450px;height:350px;background:#ffffff;margin: 0 auto;margin-top:20px;background:rgba(255,0,0,1);}

        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
            </div>
        </div>
    </body>
</html>

Upvotes: 2

Related Questions