相对于图像定位块答案

【问题标题】：Positioning blocks relative to an image相对于图像定位块
【发布时间】：2011-07-16 04:30:50
【问题描述】：

我有以下情况：

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

我无法正确理解最后一点。如果不清楚，那么希望 this demo 会有所帮助：我将覆盖层与容器的顶部/底部对齐。相反，我希望它们与图像对齐。任何帮助表示赞赏！

【问题讨论】：

标签： html css image css-position

【解决方案1】：

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

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

'position:relative' 对 table-row-group 的影响，表头组、表尾组、表行、表列组、 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;
}

【讨论】：

太棒了。正是我需要的。非常感谢！
@ako 如果图像没有占据 100% 的宽度，则会中断。不确定这是否重要，但它似乎在描述中。 jsfiddle.net/B9Le8/8
@kingjiv：在什么意义上中断？覆盖层仍然是全宽的？我可以忍受:)。
@ako 是的，这就是我的意思。不确定这是不是有意的，所以我想我会指出来。
@kingjiv：感谢您指出这一点。事实上，如果它与图像的宽度相同会更好，但这并不是什么大问题（在我的用例中）。

【解决方案2】：

我认为您应该将图像放入<DIV> 并在其中设置style="background:url()"。然后在那个 DIV 中，放置你想要定位的 DIVs。这样应该更容易。

【讨论】：