html - 让 div 在不同的平面上，这样文本就可以在它下面

Question

我想创建看起来像上面的线框图的网页。我面临的问题是我创造性地指定为“问题 div”的 div。

“问题 div”需要悬浮在它下面的 div 上。它是否掩盖了“中心内容”的某些内容并不重要。

因为我在用

float :左；

在 div“Central Content”上，当我在“problem div”上放置信息时，它会将“Central div”的内容向下推。

这是我的 HTML 的样子:

<div id="CentralContent">
                <div id="ProblemDiv"><b>Problem</b> <br><br><br><br>
                    Hello World
                </div>
</div>

而且，这是 css:

body #CentralContent {
    margin-top: 10px;
    float: left;
    width: 70%;
    height: 80%;
}

#ProblemDiv{
    z-index: 2;
    font-family: "Lucida Console";
    font-size: 15px;
    margin-top: 8px;
    margin-left: 22px;
    padding: 4px;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    display: inline-block; 
}

我尝试过使用 clear: both 和 z-index。但这似乎不起作用。

Answer 1

如果您不希望有问题的 div 以任何方式与其余内容交互，只需指定

position: absolute;

为了它。
另外，您确定您的 DOM 节点在您的示例中打开和关闭的位置吗？看起来很奇怪。