CSS Opacity for Child Elements

Question

I am aware opacity for child elements is technically impossible in css. I had hoped to use a workaround by setting the margin of an external element to a negative, but now the opacity simply shows up OVER the element. I have attempted instead placing it above, and setting the z-index with no change.

See the full JSFiddle here: http://jsfiddle.net/etP65/1/

#sellbottom {
    z-index:50
margin: -114px 0;
width: 135px;
height: 60px;
border-top: 1px solid #c8d5da;
background-color: #96adb7;
opacity: .8;
padding: 30px 70px;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: alpha(opacity=80);
-moz-opacity: .8;
-khtml-opacity: .8;
}

.orangebutton {
margin: 30px 70px;
z-index: 99999;
opacity: 1;
background-color:#62ffff;
}

HTML

<div class="orange-button"></div>
<div id="sellbottom"></div>

Answer 1

Don't use "px" in the z-index. It just needs a value. For the z-index value to be used the element needs to be positioned(relative/absolute).

Just put "position: relative;" on the css for the orange button - I believe this will work for ie8 as well.

.orangebutton {
    margin: 30px 70px;
    position: relative;
    z-index: 99999;