position attribute

# Web Site Writing Basics

# css

# position

Positions in CSS are the properties used to determine the placement of Elements on a web page. There are five possible values: static, relative, absolute, fixed, and sticky, each of which has different working methods and results in determining the placement and overlay of Elements on a web page.

Type of position in CSS

1. Static (default):

Elements are placed in normal order in web pages, and have no effect on the use of other features such as top, bottom, left, right.

2. Relative:

Element will be placed from the original position as usual, but the top, bottom, left, right properties can be used to promote the Element. This will create space for the Element to be moved, but another Element will not see this shift and continue to be placed from the original position.

3. Absolute:

Elements are positioned based on Element covers (elements) with non-static position values (e.g. relative, absolute, fixed). Other Elements are invisible to this Element and reposition from the previous Element.

4. Fixing:

Elements are always pinned to the viewport (browser window) no matter how the user moves the page.

5. Sticky:

It is a combination of relative and fixed values. Element is first placed in the usual order. Then, as the user scrolls the page until that Element approaches the designated position with top, bottom, left, or right, Element changes to a fixed position and remains stationary.