div 在相对位置内的绝对定位给出相同的结果

Question

我一直在尝试确定正确定位 div 的最佳方式（正确方法）。我可以通过两种方式之一实现我的结果：

Parent 和 Children Div = 相对位置
Parent Div = 相对和 Children Div = 绝对

鉴于结果相同，一种方法是否优于另一种方法？如果是，为什么？也许，有些事情我没有考虑到我应该考虑，这就是我提出这个问题的原因。

我把我的代码贴在这里供参考，所以你可以看看我在做什么。在 div1-1 和 div1-2 的 CSS 中，我已经注释掉了相对位置代码，但是如果你 un-comment 那个并注释绝对位置部分，你就会明白我指的是什么。

* {
  margin: 0px;
  padding: 0px;
}
.parent-container {
  background-color: cyan;
  height: 500px;
}
.child-container {
  background-color: black;
  color: white;
  border: 5px solid white;
  height: 200px;
  position: relative;
  top: 10%;
  left: 10%;
  width: 80%;
}
.div1 {
  background-color: green;
  color: white;
  position: relative;
  float: left;
  width: 30%;
  margin-right: 10px;
  height: 200px;
}
.div1-1 {
  background-color: blue;
  color: white;
  width: 60px;
  height: 100px;
  position: absolute;
  /*position: relative;
 float: left;*/
  left: 10px;
}
.div1-2 {
  background-color: orange;
  color: white;
  width: 60px;
  height: 100px;
  position: absolute;
  /*position: relative;
 float: left;*/
  left: 80px;
}
.div2 {
  background-color: brown;
  color: white;
  position: relative;
  float: left;
  width: 10%;
  margin-right: 10px;
}
.div3 {
  background-color: orange;
  color: white;
  position: relative;
  float: left;
  width: 10%;
  margin-right: 10px;
}
.div4 {
  background-color: red;
  color: white;
  position: relative;
  float: left;
  width: 10%;
  margin-right: 10px;
}
.div5 {
  background-color: blue;
  color: white;
  position: relative;
  float: left;
  width: 10%;
  margin-right: 10px;
}
.abs-div6 {
  background-color: pink;
  color: black;
  position: absolute;
  width: 15%;
  top: 30%;
  left: 40%;
}

<div class="parent-container">
  <div class="child-container">
    <div class="div1">
      <p>div1</p>
      <div class="div1-1">
        <p>div1-1</p>
      </div>
      <div class="div1-2">
        <p>div1-2</p>
      </div>
    </div>
    <div class="div2">
      <p>div2</p>
    </div>
    <div class="div3">
      <p>div3</p>
    </div>
    <div class="div4">
      <p>div4</p>
    </div>
    <div class="div5">
      <p>div5</p>
    </div>
    <div class="abs-div6">
      <p>abs-div6</p>
    </div>
  </div>
</div>

Answer 1

如果您确定元素周围将包含哪些内容以及它将变得多大，那么相对是一个不错的选择。它适用于不同长度的流动内容（文本、图像等）。

但是缺点在这里显示：http://jsfiddle.net/kxfn7bsj/1/

Relative 仍然会受到外部元素的影响，即使您像在 fiddle 中那样使用 top left right bottom 值也是如此。这就是 absolute 通过将元素 放置在 DOM 流 之外的地方，所以它们不受 neighboring/sibling 维度布局变化的影响（就像在更新 fiddle 以上）。

这完全取决于您需要它的结构。

Answer 2

您应该根据自己想要达到的效果来选择定位方式。

相对定位让其他页面元素知道你的元素。这意味着您的元素的大小和位置将影响其他页面元素的大小、位置和行为。

绝对定位从文档流中删除元素。它被渲染了，但是其他元素不知道绝对定位元素存在的事实，所以它们表现得就像根本没有添加元素一样。

例如文本将浮动在相对定位的元素周围，而绝对定位的元素将覆盖它，因为文本不知道它呈现的位置已经被您的元素占据。

div 在相对位置内的绝对定位给出相同的结果

Absolute positioning of div inside Relative positiong gives same results

html

css