html - 为什么我的 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% 放入 body 但它没有帮助。

Answer 1

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

我还要指出 bottom 和 margin-bottom 是非常不同的东西，百分比边距可能会很麻烦(你并不总是知道你想要的是什么'占一定百分比)。

如需更具体的建议，请提供更具体的用例。