Question

页面中的

#box2已定位为绝对位置，左偏移量为200px，因此向右移动200 px。但是，顶部偏移量也会以某种方式设置为200px，但是如果我正确理解绝对定位，它应该相对于它的父（在这种情况下是主体）定位，因此它应该具有顶部偏移{{1} }。

你能解释一下为什么会这样吗？

Answer 1

使用您的css .box，您将所有框1 - 3设置为position: relative。您的css #box2在框2上设置绝对定位.id（#box2）的css选择器比类选择器（.box）更具体，因此positioning: absolute in #box2取代了positioning: relative

中的.box

您没有在#box2的css中定义顶级属性/值。这意味着除了左侧位置外，它将与其他标签一起流动。

由于div显示为block，因此会显示在#box1下方。由于您的css left: 200px;

，它将从左侧绘制200px

尝试将#box2的css更改为此类

#box_2 { background: #44accf; left: 150px; top: 100px; position: absolute; }

并使用左侧和顶部值，以了解绝对定位正在做什么。

Answer 2

你没有给它一个top:值 - 所以如果它是相对定位/默认位置它就把它放在原处（正如BoltClock所说，这被称为static position）。

出于本节和下一节的目的，术语“静态   “（元素）”大致指的是元素的位置   会有正常的流量。
     更确切地说，静态位置   'top'是从包含块的上边缘到的距离   假设盒子的上缘边缘本来就是   元素的第一个框，如果其指定的'position'值已经存在   'static'和它指定的'float'是'none'并指定它   'clear'一直是'none'。

〜W3 Spec

这是一个基本的例子：

html,
body {
  margin: 0;
  padding: 0;
}
.box {
  position: relative;
  width: 200px;
  height: 200px;
}
#box_1 {
  background: #ee3e64;
}
#box_2 {
  background: #44accf;
  left: 200px;
  position: absolute;
  top: 0;
}
#box_3 {
  background: #b7d84b;
}

<div id="box_1" class="box"></div>
<div id="box_2" class="box"></div>
<div id="box_3" class="box"></div>

正如您所看到的，这也可以使用display:inline-block属性执行此操作（因为您要删除占用宽度的100％的默认“块”样式），然后您就不会根本不需要担心绝对：

html,
body {
  margin: 0;
  padding: 0;
}
.box {
  position: relative;
  width: 200px;
  height: 200px;
  display: inline-block;
}
#box_1 {
  background: #ee3e64;
}
#box_2 {
  background: #44accf;
}
#box_3 {
  background: #b7d84b;
}

<div id="box_1" class="box"></div>
<div id="box_2" class="box"></div>
<div id="box_3" class="box"></div>

但是，如果您需要它只有两个方格宽，您可能希望将其包装在容器div宽度中并设置宽度：

html,
body {
  margin: 0;
  padding: 0;
}
.box {
  position: relative;
  width: 200px;
  height: 200px;
  display: inline-block;
}
#box_1 {
  background: #ee3e64;
}
#box_2 {
  background: #44accf;
}
#box_3 {
  background: #b7d84b;
}
.container{
  width:500px;
  }

<div class="container">
  <div id="box_1" class="box"></div>
  <div id="box_2" class="box"></div>
  <div id="box_3" class="box"></div>
</div>

所以，你认为绝对定位的元素与position:relative的下一个可用父元素对齐是正确的（因为你没有声明一个，所以恰好是正文，你有）只是错过了使用top将它定位在你想要垂直的位置，因此默认为'否则'的位置 - 这是基线（在div中默认位于底部）

为什么绝对定位的div从顶部开始？

2 个答案: