Positioning

Positioning is a fundamental concept in CSS that allows you to control the placement of elements on a webpage. By understanding the different positioning schemes (static, relative, absolute, fixed, and sticky), as well as related properties like z-index and stacking contexts, you can create complex layouts and control the visual hierarchy of your content.

Position

Each positioning method determines how an element is placed in the document and how it interacts with other elements.

Position property takes in the following values,

1. static
2. relative
3. absolute
4. fixed
5. sticky

Static

This the default behavior of an HTML element in a HTML file, meaning elements are positioned according to the normal document flow, they appear in the order they are written in the HTML.

Since its default style you dont need to specify the position: static for the elements, The top, right, bottom, and left properties have no effect on static elements.

div {
  position: static;
}

Relative

A relatively positioned element is moved relative to its original position in the normal document flow. The element’s original position in the document flow is preserved, meaning it still occupies space. We can use top, right, bottom, and left properties to move the element from its original position. Other elements are not affected by the movement of the relatively positioned element.

div {
  position: relative;
  top: 20px; /* Move 20px from top */
  left: 10px; /* Move 10px from left */
}

Absolute

An absolutely positioned element is removed from the normal document flow and positioned relative to its nearest positioned ancestor (an ancestor with position set to relative, absolute, or fixed). If no ancestor is positioned, it is positioned relative to the initial containing block (typically the browser window). The top, right, bottom, and left properties define the exact position. Other elements in the document flow are unaffected by the absolutely positioned element, meaning it can overlap other elements.

.container {
  position: relative;
}

.absolute-box {
  position: absolute;
  top: 50px;
  left: 100px;
}

Fixed

A fixed-positioned element is positioned relative to the browser window (viewport), regardless of scrolling. The element stays fixed in place even when the page is scrolled.

The element is removed from the normal document flow. The top, right, bottom, and left properties determine its exact position.

.fixed-banner {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: white;
}

This creates a fixed header or banner that remains at the top of the viewport as you scroll.

Sticky

A sticky-positioned element acts like a relatively positioned element until it reaches a specified position, at which point it sticks in place (like fixed positioning).

The element toggles between relative and fixed positioning depending on the scroll position. The top, right, bottom, or left values determine when the element becomes “sticky.”

.sticky-header {
  position: sticky;
  top: 0;
  background-color: yellow;
}

This creates a header that sticks to the top of the page when scrolling past it.

Z-index Property

The z-index property controls the vertical stacking order of elements that overlap. It only applies to elements with a positioning value other than static (i.e., also called positioned elements -> relative, absolute, fixed, or sticky).

selector {
  z-index: value;
}

The z-index can be positive, negative, or zero.

Higher z-index values place elements on top of those with lower values, elements with equal z-index values stack according to their order in the HTML (the latter appears on top).

.box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}

.box2 {
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box2 will appear on top of .box1 because it has a higher z-index value.