我有以下代码：
body {
padding: 0;
margin: 0;
}
.container {
width: 30%;
margin: 0 35%;
background: yellow;
position: relative;
height: 900px;
}
.p1_1 {
position: relative;
width: 50%;
height: 70%;
top: 10%;
left: 0;
background-color: green;
}
.p1_2 {
position: relative;
width: 100%;
height: 20%;
border: 1px solid blue;
top: 0;
}<div class="container">
<div class="p1_1">
top box
</div>
<div class="p1_2">
hello box
</div>
</div>我的问题是为什么top：.p1_1的10％影响.p1_2的位置？我会以为这是将div放在第二个之后的相对简单的位置-除非我遗漏了一些显而易见的东西？
好的-所以下面的代码更接近我的期望，但是如何有15％的空间而不是10％（即，设置margin-top：15％可以正常工作），所以我很困惑70 + 10 + 20不能相等100 ??
html,body {
padding:0;
margin:0;
height:100%;
position:relative;
}
.container {
width:30%;
margin:0 35%;
background:yellow;
position:absolute;
height:100%;
top:0;
}
.p1_1 {
position:relative;
width:50%;
height:70%;
margin-top:10%;
background-color:green;
}
.p1_2 {
position:relative;
width:100%;
height:20%;
background-color:blue;
}
我还发现标签2上的http://www.barelyfitz.com/screencast/html-training/css/positioning/解释了
“请注意，如果我们不移动div-1，通常该空间应该是：现在是一个空白空间。移动div-1时，下一个元素（div-after）没有移动。这是因为div-1仍然即使我们已经移动了它，也占据了文档中的原始空间。”
这是一种根据父母的身高将2格下降10％的方法，使他们保持父母的70％和20％。
body {
padding: 0;
margin: 0;
}
.container {
width: 30%;
margin: 0 35%;
background: yellow;
position: relative;
height: 900px;
}
.p1_1 {
position: relative;
width: 50%;
height: 70%;
left: 0;
top: 10%;
background-color: green;
}
.p1_2 {
position: relative;
width: 100%;
height: 20%;
border: 1px solid blue;
top: 10%;
}<div class="container">
<div class="p1_1">
top box
</div>
<div class="p1_2">
hello box
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句