css - 在 Container 中定位子元素

Question

我正在尝试这个：有一个图片元素被包裹在一个容器 div 中

<div id="container">
    <div id="a">
        <img src="b.jpg" alt="b" />
    </div>
</div>

现在我想放置子元素，使图片的顶部和左侧始终是容器 div 的高度和宽度的 25%。我怎样才能做到这一点？

score 2 · Accepted Answer

如果这是唯一的要求，您可以通过在内部 div 上添加填充来实现。

根据 W3C，这些百分比应该是指外部 div 的尺寸。

与边距属性一样，填充属性的百分比值是指生成框的包含块的宽度

对于高度，只有当您的内部 div 是外部 div 内的唯一元素时它才会起作用（因为内部 div 将确定另一个的高度）。因此，以您为例，它会起作用。

score 1 · Accepted Answer

尝试这个：

#container {position: relative;}
#container #a {position: absolute; left: 25%; top: 25%;}

这是一个工作小提琴：jsFiddle

score 0 · Accepted Answer

尝试：

#container { position:relative; }
#container img { position:absolute; top:25%; left:25%; }

现场演示：jsFiddle

3 回答 3