为什么 css 定位不能按预期工作

Question

关于w3schools.com或that SO问题的定位部分，应该可以通过应用以下规则来对齐底部的div元素：

• 容器元素的样式必须是position: relative;
• 目标元素的样式必须为position: absolute; bottom: 10px（与容器底部对齐 10 像素）。

请在以下bootply中找到示例代码。

.container-btn 是应该放置在按钮上的绿色框，但它被放置在容器元素上方 10px 处。但是，top/left/right: 10px 的设置按预期工作。

谁能解释这种行为？我只是在学习 CSS，想了解它为什么会这样......

Answer 1

container-btn 实际上距离它的父级底部 10px，col-md-4，只是碰巧父级没有任何高度。为该列指定与其他列相同的高度，例如，.col-md-4 { height: 500px; }，您将看到绿色框按预期向下移动。