相对定位和绝对定位_相对定位

相对定位和绝对定位

An element whose position property has the value relative is first laid out just like a static element. The rendered box is then shifted vertically (according to the top or bottom property) and/or horizontally (according to the left or right property).

首先放置其position属性具有相对值的元素，就像静态元素一样。 然后，已渲染的框将垂直移动(根据top或bottom属性)和/或水平移动(根据left或right属性)。

The properties top, right, bottom, and left can be used to specify by how much the rendered box will be shifted. A positive value means the box will be shifted away from that position, towards the opposite side. For instance, a left value of 20px shifts the box 20 pixels to the right of its original position. Applying a negative value to the opposite side will achieve the same effect: a right value of -20px will accomplish the same result as a left value of 20px. The initial value for these properties is auto, which makes the computed value 0 (zero)—that is, no shift occurs.

属性top ， right ， bottom和left可用于指定渲染框将移动多少。 正值表示盒子将从该位置移向相反的一侧。 例如， left值20px将框移动到其原始位置的右侧20个像素。 将负值应用到另一侧将实现相同的效果：-20px的右值将与20px的左值实现相同的结果。 这些属性的初始值为auto，这会使计算值变为0(零)，即不发生移位。

Evidently, it’s pointless to specify both left and right for the same element, because the position will be over-constrained. If the content direction is left to right, the left value is used, and right will be ignored. In a right-to-left direction, the right value “wins.” If both top and bottom are specified, top will be used and bottom will be ignored.

显然，为同一元素同时指定left和right是没有意义的，因为位置将受到过度约束。 如果内容方向从左到右，则使用left值，而right将被忽略。 在从右到左的方向上， right值“获胜”。 如果同时指定了top和bottom ，则将使用top而bottom将被忽略。

Since it’s only the rendered box that moves when we relatively position an element, this positioning scheme isn’t useful for laying out columns of content. Relative positioning is commonly used when we need to shift a box a few pixels or so, although it can also be useful, in combination with negative margins on floated elements, for some more complex designs.

由于当我们相对定位元素时，只有渲染的框会移动，因此这种定位方案对布局内容列没有用。 相对定位通常在我们需要将一个框移动几个像素左右时使用，尽管它对于一些更复杂的设计结合浮动元素的负边距也很有用。

Control Your Containing Blocks One side effect of relative positioning is quite handy: a relatively positioned element is “positioned,” which means it becomes the containing block for any absolutely positioned descendants. This gives us an easy-to-use tool for controlling the position of our containing blocks: just set position to relative without moving the box at all.

控制您的包含块相对定位的一个副作用非常方便：“定位”一个相对定位的元素，这意味着它成为任何绝对定位后代的包含块。 这为我们提供了一个易于使用的工具来控制包含块的位置：只需将位置设置为相对位置，而无需移动盒子。

翻译自: https://www.sitepoint.com/relative-positioning/

相对定位和绝对定位