css - Align & stack png images inside a bootstrap div with position:absolute

Question

I am trying to align (and stack) some images inside a bootstrap grid.

For some reason, the images aligns to the window and not the grid.

I use position:absolute which work like this (http://www.w3schools.com/):

"An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>"

Here is a jsfiddle : http://jsfiddle.net/sbE6t/

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

score 4 · Accepted Answer

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

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

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

它有效

score 1 · Accepted Answer

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

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

css - Align & stack png images inside a bootstrap div with position:absolute

2 回答 2

Related

Reference