Question

我有一个DIV，我在其中使用style:position: absolute;top ... etc

放置表单控件

在DIV之后我想要一个段落。

我在期待

---------------
|             |
|   DIV       |
---------------

PARA

但是我正在

---------------
| PARA        |
|   DIV       |
---------------

Answer 1

问题在于，当你将div设置为绝对位置时，渲染引擎会将它从相对定位系统中移除，因此你的div不会保留它自己相对于相邻元素的高度和宽度......你必须设置div的高度静态，或者在容器内部添加一个填充，设置为容纳div的一般大小。

Answer 2

您必须手动将height的{{1}}设置为它应该基于其中的内容。执行此操作后，该段落将位于div。

下方

Without a height与with a height。

要么就是，要么不要将“表单控件”放在div。

Answer 3

如果位置是绝对的，则元素也不会受到其他元素和其他元素定位的影响。您可以将段落放在de DIV中并在此段落上使用position relative。

试试这个：

<style type="text/css">
    #box {
        position:absolute;
        top:15px;
        left:40px;
        border:1px solid red;
        width: 40px;
        height: 40px;
    }
    #paragraph{
        position: relative;
        top:30px;
    }
</style>
<div id="box">
    <p id="paragraph">my paragraph</p>
</div>

CSS定位问题

3 个答案: