Question

我试图将一个div与另一个div对齐，并在下面的一个上面应用一个边距：

<div id="divContainer">
    <div id="div1">
    </div>
    <div id="div2">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
</div>

我在第二个div中应用了一个保证金，但它不起作用：

#divContainer {
    pointer-events: none;
    position: absolute;
    top: 10px;
    left: 10px;
}

#div1 {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 5px;
}

#div2 {
    padding: 10px;
    background: rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 5px;
    top: 10px;
    width: 200px;
    background: rgba(0, 0, 0, 0.1);
}

这导致底部div出现在第一个下面。但是top: 10px;没有效果。我在网上发现要修复边距问题，我应该使用display: inline-block;然而这会导致两个div彼此相邻而不是一个在另一个之上。

如何在保持第二个div低于第一个div的同时获得所需的效果？

Answer 1

top: 10px;仅适用于绝对定位的元素。将margin-top: 10px;职位设置为亲属后，div2将有效。

Answer 2

您只需在position: relative上设置#div2：

#divContainer {
    pointer-events: none;
    position: absolute;
    top: 10px;
    left: 10px;
}

#div1 {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 5px;
}

#div2 {
    padding: 10px;
    background: rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 5px;
    top: 10px;
    width: 200px;
    background: rgba(0, 0, 0, 0.1);
    position: relative;
}

Answer 3

你没有使用margin-top而是使用top。并且需要定位顶部，右侧，底部或左侧值。默认情况下，position是静态的。因此，静态位置的值不起作用：

position: relative;/*or absolute, or fixed*/
top: 30px;/*give your value*/

现在，这有效。

我们特意将它们用于定位目的。因此，您可以改为使用margin-top。

Answer 4

我不确定你在这之后会发生什么，但是我已经创建了一个小提示，你的代码改变了一些颜色以提高可见度，top改为margin-top这是我认为你在追求什么。

JSFiddle

在CSS中将两个div垂直对齐

4 个答案: