CSS Positions
In this article, we will learn about CSS Positions and their use case with Code examples
CSS Positions
- The CSS position property sets how an element is positioned in a document.
- The placement properties determine the final location of positioned elements.
- The type of position used along with placement property tells where the element will be placed on the webpage.
- There are 5 types of Positions and 4 types of Placement Properties.
- The Placement property only works when Position is used and also depends upon type of Position used.
- The way elements are displayed on the webpage without using any CSS Position property is called Default or Normal flow.
- With the help of CSS Positions, we can alter the normal flow of webpage.
- It is a very powerful tool provided by CSS to change the element position on the webpage.
Types of CSS Placement Properties:-
- There are 4 types of Placement Properties:
- Top - It tells the element to leave this much space from Top.
- Bottom - It tells the element to leave this much space from Bottom.
- Left - It tells the element to leave this much space from Left.
- Right - It tells the element to leave this much space from Right.
Types of CSS Positions :-
- There are 5 types of CSS Positions:
- Static
- Relative
- Absolute
- Fixed
- Sticky
Static
- By default the position of element is set to static.
- Top, Bottom, Left, Right (T,B,L,R) and Z-index doesn't work when position is set to Static.
- The element will follow the normal document flow and will position itself based on the standard positioning rules on the screen.
- When on any element, if no position property is applied then that element has position set as static automatically.
- Code example : Here the position : static doesn't have any affect on the positioning of the elements. The output would have been the same if we didn't use "position : static;"
Relative
- By having an elements as "position: relative;" and setting placement property accordingly, we can adjust the position of that element from their static place.
- The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.
- The space for element is reserved as it would have been if it's position would have been static.
- The element overlaps on other elements. It doesn't displace other elements from their position.
- Code example :-
Absolute
- When position is set to "absolute", the element is removed from the normal document flow, and no space is created for the element in the page layout.
- It is positioned relative to its closest positioned ancestor(which is non static) if any; otherwise, it is placed relative to the initial containing block(body).
- Its final position is determined by the values of top, right, bottom, and left.
- Code example :- Here there are 3 div containers. 1st div is where all boxes have position static and Box4 is absolute. Box4 gets position according to body because the parent div is static. Box4 gets overlapped on the items which gets in their way. And the leftover space is filled by next elements. In 2nd div, all are positioned as static. In 3rd div, the Box4 gets offset according to the parent div because it is set to Relative. In 1st and 3rd div, Box4 has been given top and left value same. to show the difference. The space which the Box4 left have been filled up by the next elements.
Fixed
- When element is set to "fixed", then that element takes position according to screen body and according to top, bottom, left, right values given.
- The element is removed from the normal document flow, and no space is created for the element in the page layout.
- It gets fixed, and will overlap other elements.
- The space left behind is filled by other elements.
- Code example :- Here the Box4 is set to Fixed. It will take offset values according to screen body. The space left behind is filled by Box5.
Sticky
- When element is set to "position : sticky", then that element sticks on that position on scrolling of webpage according to values given of T,B,L,R.
- The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor) based on the values of top, right, bottom, and left.
- The offset does not affect the position of any other elements.
- The sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism", even if that ancestor isn't the nearest actually scrolling ancestor.
- Code example:-
That's it...Thankyou for reading...See you soon...Happy Learning...