为什么我的CSS没有应用保证金？

Question

我有一个div：

.divcom {
    background-color: lime;
    border-radius: 5px;
    width: 37.5%;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.39), 0 6px 20px 0 rgba(0, 0, 0, 0.39);
}

我希望它在页面结束前在底部有一些空间（让我们说50％）

当我尝试做bottom: 50%或margin-bottom: 50%它不起作用（颜色消失）。

我也尝试将margin-bottom: 50%放入体内，但它没有帮助。

Answer 1

绝对定位的元素在正常文档流程之外。它们应该谨慎使用，因为它们使布局更复杂。您的元素可能有边距，但不会影响页面上的其他元素，因为它是单独分层的。

我还要指出，bottom和margin-bottom是非常不同的东西，并且百分比边际可能很麻烦（你并不总是知道你占了一定比例）。

有关更具体的建议，请提供更具体的用例。

Answer 2

尝试将margin-bottom设置为auto并将bottom设置为10px。因为top被设定为100％所以我无法真正告诉你在尝试什么