freeCodeCamp/guide/english/css/css-position/index.md

1.3 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.

More Information:

MDN Documentation: MDN

Browser Support: caniuse

YouTube: Part1 | Part2