在容器中放置子元素

Question

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

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

现在，我要放置子元素，使得图片的顶部和左侧始终是容器div的高度和宽度的25％。 我该如何实现？

Answer 1

如果这是唯一要求，则只需在内部div上添加填充即可。

根据W3C，这些百分比应参考外部div的尺寸。

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

http://www.w3.org/TR/CSS2/box.html

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

Answer 2

尝试这个：

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

这是一个有效的小提琴： jsFiddle

Answer 3

尝试：

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

现场演示： jsFiddle