相对父级，按百分比垂直放置的绝对位置? [英] Relative parent, absolute positioning vertically by percentage?

问题描述

我正在尝试按百分比创建垂直放置的DIV.我将父容器设置为相对，将内容div设置为绝对.当我用像素定位内容div时，这种方法很好用，但是当我尝试百分比时，则忽略了百分比:

I'm trying to create a vertically positioned DIV by percentage. I have the parent container to set to relative and the content div set to absolute. This works fine when I position the content div with pixels, but when I try percentages the percentages are disregarded:

.container {
position: relative;
}


.content {
position: absolute;
left: 10%;
top: 50%;
}


<div class="container"><div class="content"> This is the content div. It should be 10% from the left of the container div.
</div></div>

内容div出现在页面顶部，而忽略了50％的垂直位置.我想念什么?提前致谢！

The content div appears at the top of the page, disregarding the 50% vertical placement. What am I missing? Thanks in advance!

推荐答案

绝对定位的元素是从文档的自然流中取出的，这意味着您的容器的高度和宽度为零.

The absolutely positioned element is taken out of the natural flow of the document which means your container has zero height and width.

该零高度和宽度的10％和50％当然是零.

10% and 50% of that zero height and width are, of course, zero.

如果您给容器指定高度和宽度，则百分比位置将开始按需要工作.

If you give your container a height and width, your percentage positions will start to work as you want.

这是一个有效的示例.

.container { position: relative; width:500px; height:500px; } 

这篇关于相对父级，按百分比垂直放置的绝对位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！