CSS Offset Properties and Static Position

Question

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

Can they apply to a statically positioned element? If so, what are the differences from applying them to elements that are not statically?

Answer 1

to offset the element that should be position:relative

the coordinates, top , right , bottom and left are performed for different purposes, depending on whether the element is relative or absolutely positioned.

When is an element offset as opposed to a displaced?

when you actually compensate for using position: relative; , the element is not removed from the stream, and indeed, the space that the element would occupy if it remained static (by default) is still reserved for it, so you just shift it from it to its original position. Any element following it will appear where it would be done, even if you did not compensate for its predecessor - here is an example

Displacement, not displacement

If you really want to move an element, then you need to remove it from the stream, so there is no free space for it, and then when you use position:absolute; or fixed .., that is, the difference

Summary

• static by default, and you just use the fields to move around it, it will ignore the coordinates and z-index

• relative - reserved space, the coordinates will move it from it to the original space

• absolute will remove the element from the stream, and the coordinates will be calculated in accordance with it with the block that is closest relative to the positioned ancestor (or the body element if there is no relatively positioned ancestors)

• fixed does not contain a containing block, i.e. you cannot indicate to which element it should be located in relation to it, it will simply correct itself in relation to the viewport

and finally, the element will not take the z-index value if it is static by default, therefore position: relative; without any coordinates applied it is similar to static , but it is useful for z-indexing and containing a block for absolutely positioned elements

Answer 2

It makes no sense to apply them to position: static elements, since they are static.

To shift a static element by a certain amount, you can change its position property to position: relative; .

Now you can move it with top , left , etc.

There are several types of position , namely position: fixed and position: absolute .

fixed makes the element stationary on the screen, and it is not affected by scrolling, so it seems to be stuck on a computer monitor. Installing it top , etc. Sets the position.

absolute makes the element positioned relative to the document and ignores all layout rules. Setting its positions sets where it is positioned in the document.

Answer 3

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