css - top 使用 css 垂直对齐动态大小的对象

Question

我试图对齐两个动态创建的对象的左上角。顶部较小的矩形包含一些描述性文本，较大的矩形包含图像。问题是，我无法使用 position:absolute 定位元素，因为页面上有几组从数据库动态加载。

它应该是这样的:

http://soundtrax.at/aligning_objects.gif

使用 position:relative 不起作用，因为后面对象的位置与前一个对象的底部相关。我该怎么做才能将元素的左上角设置为引用点？

Answer 1

您可以使用position: absolute。

确保图像和文本包裹在具有以下 CSS 的容器中:

.wrap {
    position: relative;
 }

现在，如果您对 .wrap 中的元素使用 position: absolute，它将起作用，并相对于 .wrap 定位自身: )

.text {
   position: absolute;
   top: -5px;
   left: -5px;
}

JS fiddle :http://jsfiddle.net/msR77/