Question

我试图将2个div分层，以便其中一个的内容高于另一个，而另一个具有不透明度设置以使其半透明。但是，无论我采用哪种方式将HTML放在图层上，半透明图层始终位于内容之上。这是我认为在HTML排序中正确的方式：

<div id="translucent"></div>
<div id="content">...</div>

然而它似乎无法正常工作 - 我用来重叠图层的基本样式在这里 - 这可以将一个放在另一个上面，但半透明的样式似乎保持在另一个之上一个

<style>
    #content
    {
         margin-top:-525px;
    }
    #translucent
    {
         height:525px;
         opacity:0.8;
    }
</style>

任何想法？

Answer 1

为什么不使用位置和z索引？它应该像这样工作：

#content {
     margin-top:-525px;
     // positioning something allows you to do more accurate placements
     position: relative;
     // adding a z-index allows you to play with the layers (because... z-axis.)
     z-index: 1;
}
#translucent {
     height:525px;
     opacity:0.8;
     position: relative;
     z-index: 0;
}

基本上，HTML DOM的工作方式如下：如果它稍后在DOM中，则它位于DOM早期的项目之上。向下转动opacity会使元素透明，但不会不存在。最好的方法是添加z-index和position，或者只使用display: block;和display: none;隐藏你的一个DIV（但你想要透明度，所以我猜测那不是一个选项。）

但是，如果您使用position: absolute;，则可以将元素放在同一个位置，而不会使用边距。然后将其包装在另一个元素（比如#wrapper）中，然后您可以同时移动这两个框。为这两个框添加width和height 100%，您可以使用包装器定义两个框＆＃39;高度和宽度，同时！啊。 CSS Magic。

<div id="wrapper">
    <div id="content">...</div>
    <div id="translucent"></div>
</div>

继承人的CSS：

#wrapper {
    position: relative;
}
#content {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
#translucent {
    height:525px;
    opacity:0.8;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

我的一个DIV总是排在最前面

1 个答案: