CSS Position Property
A web page is displayed within a browser window's viewport. Everything that you can present to the viewer is displayed in that area, although the document will require scrolling if it is larger than the viewport.
Browser width and height refers to the dimensions of the entire window, including any browser controls and other interface items.
Viewport is the area of the display area. Viewport width and height refers to the live display area of the browser window’s viewport. The live dimensions are always less than the full window dimensions.
Document width and height refers to the overall dimensions of the web page contained within the body tag. If the document's width or height are larger than the viewport width or height, you see scroll bars that let you view the rest of the document.
The position property specifies the type of positioning method used for an element. There are five different position values:
- static (default)
- relative
- fixed
- absolute
- sticky
if you set a value for position other than static, you can use top, right, bottom and left properties.
1. position: static
HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties.
2. position: relative
The element is positioned relative to its normal position. Setting the top, right, bottom, and left properties will cause it to be adjusted away from its normal position.
If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will have no effect on its positioning. However, if you give it some other positioning attribute, for example, top: 20px;, it will shift its position 20 pixels down from where it would normally be.
3. position: absolute
Absolute positioning takes an element out of the normal flow of the document, leaving no space behind. The element is positioned relative to its nearest positioned ancestor (relative, absolute, or fixed). If no positioned ancestor exists, it is relative to the document body.
4. position: fixed
The element is positioned relative to the viewport. The element always stays at the same place even if the page is scrolled.
The top, right, bottom, and left properties are used to position the element. This allows you to establish constant elements in the screen that do not scroll with the rest of the content.
5. position: sticky
The element is positioned based on the user's scroll position. It is positioned relative until a given offset position is met in the viewport and then it "sticks" in place (like position: fixed).
The element acts as relative until a scroll threshold is met, then becomes fixed.
Setting an Element's Position
All positioned elements can have top, right, bottom and left values to position the element from those four sides.
A relative element will be offset relative to its own edges. An absolute element will be offset relative to its parent’s edges. A fixed element will be offset relative to the viewport’s edges. You can use negative values to move the content up and to the left instead of down and to the right.
Overlapping Elements
When elements are positioned, they can overlap other elements. The z-index property specifies the stack order of an element - which element should be placed in front of, or behind, the others. An element can have a positive or negative stack order.
An element with greater stack order is always in front of an element with a lower stack order. If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.