CSS Position

The position property specifies the type of positioning method used for an element. There are five main values: static, relative, fixed, absolute, and sticky.

---

1. static (Default)

Elements are positioned according to the normal flow of the page. They are not affected by the top, bottom, left, and right properties.

div { position: static; }

---

2. relative

The element is positioned relative to its normal position. Setting top: 10px moves it 10 pixels away from its original location, without affecting the position of other elements.

div {
    position: relative;
    left: 30px;
    top: 10px;
}

---

3. absolute

The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor (an ancestor with a position other than static).

.parent { position: relative; }
.child {
    position: absolute;
    top: 10px;
    right: 10px;
}

---

4. fixed

The element is positioned relative to the viewport (the browser window). It stays in the same place even if you scroll the page.

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
}

---

5. sticky

The element oscillates between relative and fixed, depending on the user's scroll position. It 'sticks' to a specified location (e.g., top: 0) within its parent container.

div {
    position: sticky;
    top: 0;
}

---

The Z-Index Property

When elements are positioned, they can overlap each other. The z-index property specifies the stack order of an element (which element should be in front, and which should be behind).

.front { z-index: 10; }
.back  { z-index: -1; }

---

---