Controlling the position of an element on the page, CSS position property
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.
- 09.11.23IT / Database Errors when migrating from MySQL 5.6 to 5.7 and how to fix them - database dump import failed with an error or INSERT does not work. Disabling STRICT_TRANS_TABLES strict mode or using IGNORE
- 09.07.22IT / Misc Convert office files DOC, DOCX, DOCM, RTF to DOCX, DOCM, DOC, RTF, PDF, HTML, XML, TXT formats without loss and markup changes
- 07.07.22IT / Safety How to protect PHP, JS, HTML, CSS source code - obfuscation, minification, compression and encryption
- 06.07.22IT / Safety Connection not secure, problem with Lets Encrypt - how to fix expired 09/30/2021 DST Root CA X3, remove it manually and install ISRG Root X1. Example on MS Windows 7
- 08.07.21IT / Misc How to make a free translation for a website without an API, translate documents in Google Translate