Question

我有以下代码：

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>

我的问题是为什么顶部：.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-after）做了当我们移动div-1时不动。那是因为div-1仍然占据着那个文档中的原始空间，即使我们已移动它。“

Answer 1

这是一种如何根据父母的身高将2 div降低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>

两个相对div相互重叠

1 个答案: