CSS 偏移属性和静态位置

CSS offset properties and static position

提问by DrStrangeLove

Are offset properties (left, top, bottom, right) only for non-static positions?

偏移属性（左、上、下、右）是否仅适用于非静态位置？

Can they be applied to a statically positioned element? If so, what are the differences from applying them to non-statically positioned elements?

它们可以应用于静态定位的元素吗？如果是这样，将它们应用于非静态定位元素有什么区别？

回答by clairesuzy

to offsetan element it's position has to be position:relative

要偏移一个元素，它的位置必须是position:relative

the co-ordinates, top, right, bottomand leftserve different purposes depending on if the element is relatively or absolutely positioned.

的坐标，top，right，bottom和left用于不同的目的依赖于如果该元素是相对或绝对定位。

When is an element offsetas opposed to moved?

什么时候元素偏移而不是移动？

when you actually offset using position: relative;the element is not removed from the flow, and indeed the space that the element would have taken up if it had remained static (the default) is still reserved for it, therefore you have just offset it from it's original position. Any element following it will appear where it would have done even if you hadn't offset it's predecessor - like this example

当您实际使用position: relative;元素进行偏移时，并没有从流中删除，并且实际上，如果元素保持静态（默认），该元素将占用的空间仍然保留给它，因此您只是将它从它的原始位置偏移了. 即使您没有抵消它的前身 - 就像这个例子一样，它后面的任何元素都会出现在它应该完成的地方

Moving, not offsetting

移动，而不是抵消

If however you actually want to move an element, then it needs to be removed from the flow, so there is no space reserved for it, and then that's when you use position:absolute;or fixed.. that is the difference

然而，如果你真的想要移动一个元素，那么它需要从流中移除，所以没有为它保留空间，然后你使用position:absolute;或修复..这就是区别

Summary

概括

• staticis the default, and you just use margins to move it around, it will ignore co-ordinates and z-index

• relativeis reserved space, co-ordinates will offset it from it's original space

• absolutewill remove the element from the flow and the co-ordinates will be calculated according to it's containing block, which is the nearest relatively positioned ancestor (or the bodyelement if no relatively positioned ancestors exist)

• fixeddoes not have a containing block, i.e. you can't specify which element it should be positioned in relation to, it will just fix itself in relation to the viewport

• static是默认值，您只需使用边距来移动它，它将忽略坐标和 z-index

• relative是保留空间，坐标会偏移它的原始空间

• absolute将从流中删除元素，坐标将根据它的包含块计算，这是最近的相对定位的祖先（body如果没有相对定位的祖先存在，则为元素）

• fixed没有包含块，即您不能指定它应该相对于哪个元素定位，它只会相对于视口固定自己

and finally an element will not accept a z-indexif it's position is the default of static, so position: relative;without any co-ordinates applied is similarto static, but it is useful for z-indexing and being a containing block for absolutely positioned elements

最后的元件将不接受z-index，如果它的位置是静态的默认的，所以position: relative;没有任何坐标施加被相似于static，但它是绝对定位元素针对z索引有用并成为一个包含块

回答by Blender

It makes little sense to apply them to position: staticelements, as they are static.

将它们应用于position: static元素毫无意义，因为它们是静态的。

To shifta static element over by a certain amount, you can change it's positionproperty to position: relative;.

要将静态元素移动一定量，您可以将其position属性更改为position: relative;.

Now, you can shift it around with top, left, etc.

现在，你可以用左右转向它top，left等等。

There exist a few more types of position, namely position: fixedand position: absolute.

还有几种类型position，即position: fixed和position: absolute。

fixedmakes the element fixed to the screen and it's unaffected by scrolling, so it's as if it's stuck to the computer monitor. Setting its top, etc. sets the position.

fixed使元素固定在屏幕上，不受滚动的影响，就像是粘在电脑显示器上一样。设置它的top等等 设置位置。

absolutemakes the element positioned relative to the document and ignore all layout rules. Setting it's position sets where it is positioned on the document.

absolute使元素相对于文档定位并忽略所有布局规则。设置它的位置设置它在文档上的位置。

回答by Jarrett Widman

They can be applied to absolute and fixed position elements, which are essentially the same but fixed always uses the document window as its anchor. You can also apply them to relatively positioned elements in which case they are an offset from what is best described as the default inline positioning.

它们可以应用于绝对和固定位置元素，它们本质上是相同的，但固定总是使用文档窗口作为其锚点。您还可以将它们应用于相对定位的元素，在这种情况下，它们与最恰当地描述为默认内联定位的元素有偏移。