相对于图像定位块

Question

我有以下情况：

• 我有一个固定大小的容器。
• 在容器内，我显示一个比容器大的图像（大小未知）。我想显示尽可能大的图像（但保持纵横比）。我还希望图像在容器中垂直和水平居中（到目前为止一切都很好，我知道该怎么做）
• 现在我想在图像上有两个覆盖层（大小未知）：一个与顶部对齐，一个与顶部对齐图像的底部。

我无法正确理解最后一点。如果不清楚，那么希望 这个演示 应该有所帮助：我的叠加层与 < 的顶部/底部对齐em>容器。相反，我希望它们与图像对齐。任何帮助表示赞赏！

Answer 1

position:relative 不适用于表格单元格。

从规范： http://www.w3.org/TR/CSS21 /visuren.html#propdef-position

“position:relative”对表行组的影响，
表头组、表页脚组、表行、表列组、
table-column、table-cell 和 table-caption 元素未定义。

因此，添加一个包装器 div 并对其应用 position:relative ：

http://jsfiddle.net/B9Le8/5/

<div id="container">
    <div> <!-- the wrapper -->
        <img id="img" src="http://lh5.ggpht.com/-J7Q7cUDEFOU/S_bKEoyMSzI/AAAAAAAAGIw/PZJduitsVa0/largeNewGoogleLogoFinalFlat-a.png" />
        <div class="overlay" id="top">Overlay top</div>
        <div class="overlay" id="bottom">Overlay bottom</div>
    </div>
</div>

#container > div {
    position: relative;
}

Answer 2

我认为你应该将图像放在

中并在其中设置 style="background:url()" 。然后在该 DIV 中，放入您想要定位的 DIV 。这样应该更容易。