CSS Position
- The position property in CSS is used to control the location of an element on a web page.
- It allows developers to place elements in a specific position according to their requirements.
- By using the position property, we can create navigation bars, sidebars, pop-up windows, sticky headers, and many other layouts.
Syntax
selector { position: value; }
Position: static
- static is the default value of the position property.
Characteristics
- Elements follow the normal flow of the document.
- top, bottom, left, and right do not work.
Position: relative
The relative value moves an element from its original position.
Characteristics
- The original space remains unchanged.
- We can use top, bottom, left, and right.
Position: absolute
The absolute value positions an element relative to its nearest positioned parent element.
Characteristics
- The element is removed from the normal document flow.
- Other elements behave as though the element is not there.
- It uses the nearest positioned parent as a reference point.
Position: fixed
The fixed value places an element relative to the browser window.
Characteristics
- The element remains in the same position.
- It stays visible while scrolling.
Position: sticky
The sticky value behaves like both relative and fixed.
Characteristics
- The element behaves like relative at first.
- It becomes fixed after reaching a specified position.
- The top property is usually required.
Top comments (0)