使用 position:absolute 在 bootstrap div 中对齐和堆叠 png 图像答案

【问题标题】：Align & stack png images inside a bootstrap div with position:absolute使用 position:absolute 在 bootstrap div 中对齐和堆叠 png 图像
【发布时间】：2013-06-28 02:05:16
【问题描述】：

我正在尝试在引导网格内对齐（和堆叠）一些图像。

由于某种原因，图像与窗口而不是网格对齐。

我使用 position:absolute 像这样工作（http://www.w3schools.com/）：

"绝对位置元素相对于第一个位置不是static的父元素定位。如果没有找到这样的元素，则包含块是"

这是一个 jsfiddle ： http://jsfiddle.net/sbE6t/

.rings img {
position:absolute;
top: 0px;
left: 0px;
}

【问题讨论】：

标签： css twitter-bootstrap css-position

【解决方案1】：

正如您所引用的，它们将绝对定位到下一个非静态元素。 If no such element is found, the containing block is <html>.

设置相对于img的父级的位置：

.rings {
  // other styles
  position: relative;
}

And it works

【讨论】：

有时解决方案就在那里，但你看不到它:-) 我认为 .rings 已经是 position:relative... 谢谢！

【解决方案2】：

您的包装元素必须设置为position:relative

.rings {
    overfow:hidden;
    height: 400px;
    background: #999;
    position:relative;
}

【讨论】：