html - 让 div 覆盖另一个带有 标签的 div

Question

我有一个名为“事件”的 div，其中包含几个段落标记。我想用另一个 div 覆盖事件 div，称为“已取消”。这样整个事件标签就被透明的取消标签覆盖了。我只是无法让 css 按我想要的方式工作，我真的需要帮助。事件 div 最好不要有给定的宽度。这是我到目前为止所拥有的。 (看起来不对)。非常感谢。

CSS

#container {
    position: relative;
}

#event, #cancelled {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid red;
}

#cancelled {
    text-align: center;
    z-index: 1;
    color: blue;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid green;
}

HTML

<div id="container">
    <div id="cancelled">
        cancelled
    </div>

    <div id="event">
        <p>aaa</p>

        <p>bbb</p>

        <p>ccc</p>
    </div>
</div>

Answer 1

你做错了。 #event 元素不应该是绝对的，只能是 #cancelled，如图所示:

CSS

#container {
    position: relative;
}

#event,#cancelled {
    border: 1px solid red;
}

#cancelled {
    top: 40px;
    position: absolute;
    text-align: center;
    z-index: 1;
    color: blue;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid green;
}

HTML

<div id="container">
    <div id="cancelled">
        cancelled
    </div>

    <div id="event">
        <p>aaa</p>

        <p>bbb</p>

        <p>ccc</p>
    </div>
</div>

http://jsbin.com/aVefEsi/1/