将子元素放在Container中

Question

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

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

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

Answer 1

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

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

  

与margin属性类似，padding属性的百分比值是指   到生成的框的包含块的宽度

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

对于高度，它只有在你的内部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