让div在不同的平面上，以便文本可以在它下面

Question

我想创建一个看起来像上面线框图的网页。我面临的问题是我创造性地将div命名为＆＃34;问题div＆＃34;。

＆＃34;问题div＆＃34;需要悬浮在它下方的div上。如果它隐藏了“中心内容”的某些内容并不重要。

因为我正在使用

float：left;

在div＆＃34; Central Content＆＃34;上，当我把信息放在＆＃34;问题div＆＃34;上时，它会推送＆＃34;中心div＆＃34;的内容。进一步下来。

以下是我的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：和 z-index 。但这似乎不起作用。

Answer 1

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

position: absolute;

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

Answer 2

HTML标记存在问题。它应该是这样的

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

</div>

Hello World 应该在ProblemDiv之外

查看解决结果http://jsfiddle.net/4ejLcefs/1/

无论Nit说什么也是如此，但你必须纠正你的标记。