css位置超出了视野范围

Question

#box_1 {
    position: relative;
    width: 200px;
    height: 200px;
    background: #ee3e64;
}
#box_2 {
    position: relative;
    width: 200px;
    height: 200px;
    background: #44accf;
    right: 200px;
}
#box_3 {
    position: relative;
    width: 200px;
    height: 200px;
    background: #b7d84b;
}

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

为什么蓝框超出范围。是不是从右边指定了它的位置？

Answer 1

right偏移的正值将其向左移动。尝试使用负值或使用left。

<强>解释

当元素使用position: relative时，将根据内容流中元素的原始位置获取定位偏移量。

在此示例中，当您在right: 200px上使用#box_2时，元素的右边缘会移动200px到元素原始右边缘位置的右侧，因此元素会朝着左边。如果您使用负值，则转移将向右移动。

您可以使用left: 200px来实现类似的效果。

参考：http://www.w3.org/TR/CSS21/visuren.html#choose-position

#box_1 {
  position: relative;
  width: 200px;
  height: 200px;
  background: #ee3e64;
}
#box_2 {
  position: relative;
  width: 200px;
  height: 200px;
  background: #44accf;
  right: -200px;
}
#box_3 {
  position: relative;
  width: 200px;
  height: 200px;
  background: #b7d84b;
}

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

Answer 2

相对＆gt; 这个关键字列出了所有元素，就好像元素没有定位一样，然后调整元素的位置，而不改变布局（从而为元素留下一个空隙，如果它没有被定位）

看看这些：

#two { position: relative; top: 20px; left: 20px; }

我相信您正在关注this文章？我建议你把它读到最后。