html - 子元素的 CSS 不透明度

Question

我知道在 css 中子元素的不透明度在技术上是不可能的。我曾希望通过将外部元素的边距设置为负数来使用变通方法，但现在不透明度只是显示在元素上方。我尝试将它放在上面，并设置 z-index 不变。

在这里查看完整的 JSFiddle: 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

不要在 z-index 中使用“px”。它只需要一个值。对于要使用的 z-index 值，元素需要定位(相对/绝对)。

只需输入“position:relative；”在橙色按钮的 css 上 - 我相信这也适用于 ie8。

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