html - 位置相对固定的 div 对齐方式。为什么？

Question

我在调整两个 div 的大小以填充页面的整个宽度时遇到问题，使用百分比(一个 60% 宽度和 3% 右边距，另一个绝对定位 37%)。我将我的问题简化为一个 jsFiddle 并实际修复了它。我有两个测试，其中唯一的区别是父级有 position:relative 集。

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

这是 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 父级的百分比。这里你的直接 parent 是 80% 所以如果它设置为绝对你的 child div 将设置为 60% 和 37% 的 100% 这就是它们重叠的原因，现在如果 parent 设置为相对的 child 将设置为 60% 和 37 80% 的 %，因此没有重叠