Introduction to CSS positioning
In CSS, “positioning” refers to how an element is positioned within a document. There are five different positioning values:
- static: This is the default value. The top, bottom, right, and left properties do not influence elements with a static position.
- relative: The relative positioned element is positioned relative to its normal position.
- absolute: The absolute positioned element is positioned relative to its nearest positioned ancestor, if any; otherwise, it is positioned relative to the initial containing block.
- fixed: The fixed position element is positioned relative to the browser window, and it will remain in the same position even if the page is scrolled.
- sticky: The sticky position element is a hybrid of relative and fixed position. It is positioned relative to its normal position until a given offset is reached, at which point it becomes fixed.
You can use the CSS position property to specify the positioning for an element and the top, bottom, left, and right properties to specify the element’s position.
CSS positioning
static position
A static positioned element is an element that is not affected by the top, bottom, right, and left properties. It will be positioned according to the normal flow of the document.For example, consider the following HTML:
<div><p>I am a paragraph.</p><p>I am another paragraph.</p></div>
Without any CSS, the paragraphs will be displayed one after the other, with the first paragraph at the top of the div and the second paragraph below it.If you add the following CSS:
p {position: static;top: 50px;left: 100px;}
The paragraphs will still be displayed one after the other, but they will not be affected by the top and left properties. The top and left properties will not affect the position of the paragraphs because they are static elements.
You can think of static positioning as the default positioning for elements. It will be static if you do not specify a positioning value for an element.
relative position
The relative positioned element is positioned relative to its normal position.For example, consider the following HTML:
<div><p>I am a paragraph.</p><p id=”relative”>I am another paragraph.</p></div>
Without any CSS, the paragraphs will be displayed one after the other, with the first paragraph at the top of the div and the second paragraph below it.If you add the following CSS:
#relative {position: relative;top: 50px;left: 100px;}
The second paragraph will be displayed 50 pixels below and 100 pixels to the right of its normal position. The first paragraph will not be affected and will still be displayed at the top of the div.
You can use the top, bottom, left, and right properties to specify how far the element should be moved from its normal position.For example, to move the element 50 pixels to the right and 20 pixels down, you could use the following:
#relative {position: relative;left: 50px;top: 20px;}
You can also use negative values to move the element up or to the left of its normal position. For example, to move the element 50 pixels to the left and 20 pixels up, you could use the following:
#relative {position: relative;left: -50px;top: -20px;}
absolute position
The absolute positioned element is positioned relative to its nearest positioned ancestor if any; otherwise, it is positioned relative to the initial containing block.For example, consider the following HTML:
<div style=”position: relative;”><p>I am a paragraph.</p><p id=”absolute”>I am another paragraph.</p></div>
Without any CSS, the paragraphs will be displayed one after the other, with the first paragraph at the top of the div and the second paragraph below it.If you add the following CSS:
#absolute {position: absolute;top: 50px;left: 100px;}
The second paragraph will be displayed 50 pixels below and 100 pixels to the right of the top left corner of the div. The first paragraph will not be affected and will still be displayed at the top of the div.If the div did not have a position value of relative, the second paragraph would be positioned relative to the initial containing block, which is the root element of the document.
You can use the top, bottom, left, and right properties to specify the exact position of the element. For example, to position the element at the top right corner of the div, you could use the following:
#absolute {position: absolute;top: 0;right: 0;}
You can also use negative values for the left and top properties to position the element outside of its containing element.
It is important to note that absolute positioning takes the element out of the normal flow of the document. Other elements will not be affected by the presence of an absolutely positioned element and will be displayed as if the element is not there.
fixed position
The fixed position element is positioned relative to the browser window, and it will remain in the same position even if the page is scrolled.
For example, consider the following HTML:
<p id=”fixed”>I am a fixed element.</p>
Without any CSS, the paragraph will be displayed in the normal flow of the document.If you add the following CSS:
#fixed {position: fixed;top: 50px;left: 100px;}
The paragraph will be displayed 50 pixels from the top and 100 pixels from the left of the browser window, and it will remain in this position even if the page is scrolled.
You can use the top, bottom, left, and right properties to specify the exact position of the element. For example, to position the element at the bottom right corner of the window, you could use the following:
#fixed {position: fixed;bottom: 0;right: 0;}
Like absolute positioning, fixed positioning takes the element out of the regular flow of the document. Other elements will not be affected by the presence of a fixed element and will be displayed as if the element is not there.
Fixed positioning is often used for elements that need to stay in a fixed position on the screen, such as navigation bars or footers.
sticky position
A sticky position element is a hybrid of relative and fixed position. It is positioned relative to its normal position until a given offset is reached, at which point it becomes fixed.
For example, consider the following HTML:
<style>#sticky {position: sticky;top: 50px;}</style><div><p>I am a paragraph.</p><p id=”sticky”>I am a sticky element.</p><p>I am another paragraph.</p></div>
Without any CSS, the paragraphs will be displayed one after the other, with the first paragraph at the top of the div and the second and third paragraphs below it.
If you scroll the page, the second paragraph will be displayed 50 pixels from the top of the viewport until you scroll 50 pixels past its normal position. At that point, it will become fixed and stay at the top of the viewport even if you continue to scroll.
You can use the top, bottom, left, and right properties to specify the element’s position when it becomes fixed. For example, to position the element at the bottom right corner of the viewport when it becomes fixed, you could use the following:
#sticky {position: sticky;bottom: 0;right: 0;}
Sticky positioning helps create elements that “stick” to the screen as you scroll, such as a navigation bar at the top of the viewport or a footer at the bottom.
CSS Positioning summary
Here is a summary of the different positioning values in CSS:
static: This is the default value. The top, bottom, right, and left properties do not affect elements with a static position.
relative: the relative positioned element is positioned relative to its normal position.
absolute: the absolute positioned element is positioned relative to its nearest positioned ancestor if any; otherwise, it is positioned relative to the initial containing block.
fixed: The fixed position element is positioned relative to the browser window, and it will remain in the same position even if the page is scrolled.
sticky: A sticky position element is a hybrid of relative and fixed position. It is positioned relative to its normal position until a given offset is reached, at which point it becomes fixed.
You can use the position property to specify the positioning for an element and the top, bottom, left, and right properties to specify the element’s position.
It is important to note that absolute and fixed positioning takes the element out of the normal flow of the document. Other elements will not be affected by the presence of an absolute or fixed-positioned element and will be displayed as if the element is not there.
