Position property is one of the most important things in css. To make an awesome layout we need to position our element properly. In this case, with the help of position property we can easily place our elements everywhere. Position property specifies the type of the position method for an element. It can be static, relative, fixed, absolute and sticky.
We will discuss each items clearly so that we can understand this
Position Static:
Html elements are by default positioned statically. Static positioned elements do not support top, bottom, right & and left properties.
An element positioned with static is not positioned in special way. It is positioned with documents normal flow.
Position relative:
When we set an elements position relative then it positioned relative to its normal position. Setting up a relatively positioned elements top, bottom, left and right adjust its position from normal position. Other elements do not adjust to fill its gaps.
Position fixed:
An element with position fixed always stays in the same place relative to its viewport. It always stays in the same place even when the page scrolls. We use top, bottom, right and left properties to position the element. A fixed element does not leave a gap in the page where it would normally have been located.
Position absolute:
When we specify an element's position with position: fixed; then it is positioned relative to the nearest positioned ancestor. If the element doesn’t have any ancestor then it is positioned relative to the document body. Position relative and position absolute are almost the same. Only difference is relative positioned relative to body and absolute positioned relative to its nearest ancestor.
Position Sticky:
An element positioned with sticky positioned based on users scroll. It is the combination of position:fixed and position relative depend on scroll position.
Oldest comments (0)