Controlling the position of an element on the page, CSS position property

19.08.18 IT / CSS 3406

In order to place an element on the page, you must specify its coordinates, that is, set the position. Coordinates can be set in various ways, relative to a particular object. CSS styles correctly there is a special property for this - position . It is intended to set how an element is positioned relative to something, such as a browser window or other objects on the page.

What values ​​does position have? Let's list below:

• absolute - specifies that the element is positioned absolutely, other elements do not notice such an element, they are displayed as if it is not on the page. The following properties are used to set the position of an element: left, top, right and bottom . It is important to note that the position of an element is also affected by the value of the position property of the parent element;
• fixed - this value is similar in its principle of operation to the absolute value, but the coordinates are anchored to the specified point on the screen and do not change when the page is scrolled - that is, the element is fixed at one point;
• relative - the position of the element is set relative to its original place, when trying to change coordinates, the element is simply shifted by the specified values;
• sticky - sets sticky positioning of an element, it can be considered as a hybrid of relative and fixed positioning;
• static - sets the display of elements on the page as usual. In this case, using the property left, top, right and bottom does not give any results;
• inherit - this property inherits the value of the parent element;
• initial - used to set the initial value of the property;
• unset is a combination of the initial and inherit keywords.

As you can see, if you use some position values, then you need to apply special properties to change the position of the element: left, top, right, bottom . The values ​​for these properties are usually specified in pixels - px . This is required for the following values: absolute, fixed, relative, sticky . Otherwise, the margin family properties should be used to position the element.

Thus, by using different values ​​of the position property, you can achieve the correct position of the element on the page.