Question

我正在从基础学习CSS，并做了一个小样本：https://jsfiddle.net/L290pjwb/

div {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  box-sizing: border-box;
}
.a {
  position: static;
}
.b {
  position: relative;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
}

<div class="a">A</div>
<div class="b">B</div>
<div class="b">B1</div>

盒子的位置如下：

好吧，我理解，position: static是HTML元素的默认位置模型，只能通过添加top, bottom, right, left属性来重新定位它。 position: relative与static类似，但提供某种offset，static不能。{/ p>

我的问题是：为什么B1框不是这样的：

Answer 1

html元素的定位方式与static元素相同，只有一个区别。你可以修改他的位置。但在物理上，该元素位于top: 0;和left: 0;。

以下是对行为的解释。

使用position: relative;就像使用static位置一样，差异＆gt;正在制作元素position: relative;，您可以使用top，＆gt; {{ 1}}，right和bottom属性，虽然元素会移动，但＆gt;物理上它将在文档流中..

请参阅this answer。

Answer 2

相对定位将元素放置在静态定位的位置，然后将其从该位置偏移而不影响其他任何内容。

B放在正常位置然后偏移。 B1被放置在通常的位置（即紧接在B 通常没有定位之后）然后偏移。

如果B1的静态位置是从B的偏移位置而不是B的静态位置计算的，那么你只能得到这个效果。

如果您想移动元素并让新位置影响其他元素的位置：使用边距而不是相对定位。

＆＃13;

div {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  box-sizing: border-box;
}
.a {
  position: static;
}
.b {
  position: static;
  margin-top: 10px;
  margin-left: 10px;
  width: 100px;
  height: 100px;
}
.b + .b {
  margin-left: 20px;
}

＆＃13;

<div class="a">A</div>
<div class="b">B</div>
<div class="b">B1</div>

＆＃13;

Answer 3

B1没有找到，因为顶部/左侧偏移是适用于它们的默认位置，让您感到困惑的是B和B1 doenst相互偏移，这是因为新位置不会影响其他元素，请尝试更改 .b顶部和左侧属性为margin-top和margin-left

Answer 4

您将元素相对于它们放置在正常流中的位置进行定位。在这种情况下，div将出现在div B之后，但会得到相同的样式值，因此，它的位置与其他div相同。

Answer 5

嘿，您可以将ID添加到B1，只需添加保证金：10px;它会给你想要的结果。

＆＃13;

div {
    width      : 50px;
    height     : 50px;
    border     : 1px solid black;
    box-sizing : border-box;
}

.a {
    position: static;
}

.b {
    position : relative;
    top      : 10px;
    left     : 10px;
    width    : 100px;
    height   : 100px;
}
#B1 {
margin:10px;
}

＆＃13;

<div class = "a">A</div>
<div class = "b">B</div>
<div class = "b" id="B1">B1</div>

＆＃13;

无法理解位置

5 个答案: