Question

我有一个名为'events'的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/

让div用<p>标签覆盖另一个div </p>

1 个答案: