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

Question

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

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

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

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

有人可以解释这种行为吗？我只是在学习 CSS 并想了解它为什么会这样......

Answer 1

container-btn 实际上距离它的父级 col-md-4 底部 10px，恰好父级没有任何高度。为该列赋予与另一列相同的高度，例如 .col-md-4 { height: 500px; 您会看到绿色方框如您所料向下移动。