1.8 KiB
1.8 KiB
| title |
|---|
| CSS Position |
CSS Position
The position property specifies the type of positioning method used for an element. It has 5 keyword values:
.static { position: static; } // default value
.relative { position: relative; }
.sticky { position: sticky; }
.fixed { position: fixed; }
.absolute { position: absolute; }
Elements can be literally positioned by getting top, right, bottom and left values with the position property. Relative positioning will position the element according to the viewport while absolute positioning will position the element according to the parent element with the position:relative property.
It's important to know that an element with position:relative property will still preserve the space it takes at its original position when it is moved, however, an element with position:absolute property will not.
- Static: Is always positioned in within the natural flow of the page.
- Relative: Is moved relative from its normal position.
- Sticky: Is placed based on the scroll, and jumps from it's relative position to it's scroll position when it is scrolled past in a document.
- Fixed: Removed from the flow of the document, and is fixed to a point in the viewpoint, regardless of scrolling.
- Absolute: Removed from the flow of the document.
More Information:
MDN Documentation: MDN
Browser Support: caniuse