Question

我在测量两个div以填充页面的整个宽度时遇到了问题，使用百分比没有重叠（一个是60％宽度和3％右边距，另一个是绝对定位的37％）。我将我的问题简化为jsFiddle并实际修复了它。我有两个测试，唯一的区别是父母有位置：相对集。

为什么这会解决我的问题？我记得当你需要一个职位时必须要做这样的解决方案：绝对的元素来定位自己绝对相对于它的父母，但我没有充分质疑发生了什么以及为什么会这样。

这里是jsfiddle http://jsfiddle.net/vajzyqe6/

这里是css

#test1, #test2
{
    width:80%;
}
.type1
{
    background-color:#FFAAAA;
    margin-right:3%;
    margin-left:auto;
    width:60%;
}
.type2
{
    position:absolute;
    background-color:#AAFFAA;
    width:37%;
}
#test2
{
    position:relative;   
}
#test2 > div.type1
{
    background-color:#AAAAFF;    
}
#test2 > div.type2
{
    background-color:#FFFFAA;
}

这里是html

<div id="test1">
    Test1
    <div class="type1">Type 1</div>
    <div class="type2">Type 2</div>
</div>
<br><br>
<div id="test2">
    Test2
    <div class="type1">Type 1</div>
    <div class="type2">Type 2</div>
</div>

Answer 1

当您在css中使用百分比高度或宽度时，它将设置为第一个position : relative父级的百分比。在这里你的直接父母是80％，所以如果它被设置为绝对你的孩子div将设置为60％和37％的100％，这就是他们重叠的原因，现在如果父母被设置为相对的孩子将设定为80％的60％和37％，因此没有重叠

Answer 2

问题不是很清楚，但无论如何这里都是答案。

在第一个例子中，.type1占身体的60％，因为它是相对的。

在第二个例子中，.type1将是#test2的60％（占身体的80％），因为这是您在添加position: relative时所设置的内容父母。

简而言之：absolute元素的大小和位置将取决于最近的relative父级。

定位相对固定的div对齐。为什么？

2 个答案: