Question

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

父母和子女Div =职位相对
父级Div =亲属和子级Div =绝对

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

我在这里粘贴了我的代码以供参考，所以你可以看到我在做什么。在div1-1和div1-2的CSS中，我已经注释了位置相关代码，但如果你取消注释并注释位置绝对部分，你将会看到我所指的位置。

* {
  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/

相对仍将受到外部元素的影响，即使您使用top left right bottom值也是如此。这是absolute通过将元素放置在DOM流之外的地方，因此它们不受邻近/兄弟维度布局更改的影响（如上面更新的小提琴）。

这完全取决于您对结构的需求。

Answer 2

您应该根据想要达到的效果选择定位方法。

相对定位使其他页面元素可以识别您的元素。这意味着元素的大小和位置将影响其他页面元素的大小，位置和行为。

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

E.g。文本将围绕相对定位的元素浮动，而绝对定位的元素将覆盖它，因为文本不知道它所呈现的位置已经被元素占用。

div内部相对定位的绝对定位给出了相同的结果

2 个答案: