The difference between static and relative positioning

Question

In CSS, what is the difference between static (default) positioning and relative positioning?

Answer 1

Static positioning is the default positioning model for elements. They appear on the page where they appear as part of a normal HTML stream. Statically positioned elements do not obey the rules left , top , right and bottom :

Relative positioning allows you to specify a specific offset ( left , top , etc.) that refers to the normal position of the element in the HTML stream. Therefore, if I have a text box inside a div , I could apply relative positioning in the text box so that it appears in a specific place relative to where it usually fits in the div :

There is also absolute positioning - in this case you indicate the exact location of the element relative to the entire document, or the next relatively positioned element further down the tree of elements :

And when a position: relative is applied to the parent in the hierarchy:

Please note that our position element is absolutely associated with a relatively positioning element.

And finally fixed. Fixed positioning restricts an element to a certain position in the viewport, which remains in place during scrolling:

You can also observe that elements with fixed positions do not cause scrolling, since they are not considered to be associated with the viewport:

While absolutely positioned elements are still connected by the viewport and will cause scrolling:

.. unless, of course, your parent uses overflow: ? to determine the scroll behavior (if any).

With absolute positioning and fixed positioning, elements are inferred from the HTML stream.

Answer 2

The position position allows you to use the top / bottom / left / right position for positioning. Static will not allow you to do this if you are not using margin options. There is a difference between the top and top.

You do not need to use static a lot since it is the default

Answer 3

You can see a simple overview here: W3School

In addition, if I correctly recall that when declaring a relative element, by default it will remain in the same place as otherwise, but you will get the opportunity to completely position the elements inside it relative to this element, which I was very useful in the past.

Answer 4

Relative position relative to normal flow. The relative position of this element (with offsets) refers to the position at which this element would be normal if it had not been moved.

Answer 5

Matthew Abbott has a really good answer.

Absolute and relative positioned elements obey the top , left , right and bottom commands (offsets), where the static positioned elements do not match.

Relatively positioned elements move offsets from where they are usually in html.

Absolutely positioned elements move offsets from the document or the next relatively located element up the DOM tree.

Answer 6

In response to "why CSS will still execute the position: static;" in one scenerio, using position: relative for the parent and position: absolute for the child limits the width of the zoom for the child. In a horizontal menu system where you may have “columns” of links, using “width: auto” does not work with relative parents. In this case, changing it to "static" will allow you to change the width depending on the contents inside.

I spent several hours figuring out why I can’t configure my container based on the amount of content inside it. Hope this helps!

Answer 7

Static: The STATIC element that we get has the value DEFAULT (Normal Object Positioning).

Relative: Relative to its current position, but can be moved. Or the RELATIVE positioned item is positioned relative to the ITSELF.