The position property in CSS is used to specify the type of positioning method used for an element. It can have the following values:
- static (default): the element is positioned according to the normal flow of the document
- relative: the element is positioned relative to its normal position, but still takes up space in the layout
- absolute: the element is positioned relative to its nearest positioned ancestor, but it is taken out of the normal flow of the document and does not take up any space
- fixed: the element is positioned relative to the browser window, and it does not move when the page is scrolled.
The position property is often used in conjunction with the top, right, bottom, and left properties, which specify the offset of the element from its positioned ancestor or the browser window.
What is position: static; and how to use it
The position: static; is the default position value for any HTML element. It means that the element is positioned according to the normal flow of the document, and it takes up space in the layout.
When you use position: static; on an element, it does not require any additional properties to be set, and it behaves as the browser would expect.
An example of using position: static;:
<div style="position: static;">
This is a static positioned element.
</div>You can also set it as the default value by just ommiting the position property,
<div>
This is a static positioned element.
</div>When you use static positioning, the top, right, bottom, and left properties have no effect on the element's position, since they only apply to elements that have been positioned relative, absolute, or fixed.
What is position: relative; and how to use it
The position: relative; value positions an element relative to its normal position, but it still takes up space in the layout. This means that the element is shifted from its original position, but other elements still behave as if the element were in its original position.
When you use position: relative; on an element, you can use the top, right, bottom, and left properties to specify the offset of the element from its original position.
For example:
<div style="position: relative; top: 20px; left: 30px;">
This is a relatively positioned element.
</div>This will move the element 20 pixels down and 30 pixels to the right from its original position.
You can also use negative values for the offset properties to move the element up and to the left, or use % values to set the offset relatively to the parent element.
Relative positioning is useful when you want to adjust the position of an element without affecting the layout of the surrounding elements.
It can also be used as a base for positioning elements absolutely, since an absolutely positioned element will be positioned relative to the nearest relatively positioned ancestor.
What is position: fixed; and how to use it
The position: fixed; value positions an element relative to the browser window, and it does not move when the page is scrolled. This means that the element will stay in the same place on the screen even when the user scrolls the page.
When you use position: fixed; on an element, you can use the top, right, bottom, and left properties to specify the offset of the element from the browser window.
For example:
<div style="position: fixed; top: 20px; right: 30px;">
This is a fixed positioned element.
</div>This will position the element 20 pixels down from the top of the browser window and 30 pixels from the right of the browser window.
As with relative position, you can use negative values for the offset properties to move the element up and to the left, or use % values to set the offset relatively to the viewport.
Fixed positioning is useful when you want an element to always be visible in the same place on the screen, such as a navigation bar or a button that triggers an action.
However, be aware that elements with fixed position can cause accessibility issues when the user is trying to access the content behind them.
What is position: absolute; and how to use it
The position: absolute; value positions an element relative to its nearest positioned ancestor, and it is taken out of the normal flow of the document. This means that the element does not take up any space in the layout, and other elements will behave as if the element were not present.
When you use position: absolute; on an element, you can use the top, right, bottom, and left properties to specify the offset of the element from the nearest positioned ancestor.
For example:
<div style="position: relative;">
<div style="position: absolute; top: 20px; left: 30px;">
This is an absolutely positioned element.
</div>
</div>This will position the element 20 pixels down and 30 pixels to the left of the nearest positioned ancestor (in this case, the parent <div> element).
If the element has no positioned ancestor, it will be positioned relative to the initial containing block (usually the viewport or the nearest block container).
Absolute positioning is useful when you want to position an element precisely within a containing element and to move it out of the normal flow. This can be used to create layered effects, like modal windows, tooltips or dialogs.
However, also be aware that elements with absolute position can cause accessibility issues when the user is trying to access the content behind them.
What is position: sticky; and how to use it
The position: sticky; value is a hybrid of the position: relative and position: fixed values. It allows an element to behave like it is position: relative until a certain point (such as the top of the screen), at which point it becomes position: fixed and remains in that position as the user scrolls.
When you use position: sticky; on an element, you can use the top, right, bottom, and left properties to specify the point at which the element will become "stuck" and maintain its position on the screen.
For example:
<div style="position: sticky; top: 0;">
This is a sticky positioned element.
</div>This will position the element as relative until the top of the element reaches the top of the viewport, at which point it will become fixed and stay at the top of the viewport as the user scrolls down the page.
It's important to note that position: sticky is not supported by all browsers and you may need to provide fallback or use some JavaScript/polyfill to support them.
Sticky positioning can be useful for creating fixed navigation bars or other elements that you want to remain visible on the screen as the user scrolls, but without taking up space in the layout.