DEV Community

Cover image for CSS Position and Z-index
Vigneshwaran V
Vigneshwaran V

Posted on

CSS Position and Z-index

#css #webdev #beginners #tutorial

Today i have studied about html position. is an important property to place the element where we want in our document. it is used to move the element from one position to another and place one element above the another element.

  • It works with the helper properties top, right, bottom, left, and z-index to determine final placement.

There are five main values for the position property

  • static

  • relative

  • absolute

  • fixed

  • sticky

static

static (Default): Elements follow the normal document flow. Setting top, right, bottom, or left has no effect.

<div class="box">Hello</div>
Enter fullscreen mode Exit fullscreen mode 
.box{
    position: static;
    top: 50px;   /* Will NOT work */
    left: 50px;  /* Will NOT work */
}
Enter fullscreen mode Exit fullscreen mode

The box stays in its normal position.

the default position for each element in html is static, it is the normal flow of document.

relative

relative: The element is positioned relative to its normal position. Offsetting it does not affect the space occupied by its original location in the document flow.

  • the element stays in its normal place, but you are allowed to move it using: top, right, bottom, left.

  • It moves relative to itself.

  • But it still keeps its original space in the layout

see the output here it moves relative to itself to left and bottom.

absolute

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

  • The element does NOT reserve space in the layout.

  • It is placed freely on the page based on a reference parent.

  • It looks for the nearest ancestor that is NOT static.

  • If none is found → it positions relative to the page/viewport (html/body area).

  • the output shows the difference first the box-1 didn't relative to any non static ancestor so it placed relative to viewport or body area or browser window.

  • The second output shows that the box-1 is relative to the Main box because it is the nearest non-static ancestor for box-1.

fixed

fixed: The element is removed from the document flow and positioned relative to the browser viewport. It stays in the same place even when the page is scrolled.

  • Removed from normal flow.

  • No space reserved.

  • Positioned relative to browser window.

  • Does NOT move while scrolling.

The above results shows that box-1 is moved from top and right and it is fixed in that same position even if the page gets minimized.
thats why it is called as fixed position property.

Commonly used for

  • Navbar.

  • Floating button.

  • Chat icon.

Sticky

sticky: The element toggles between relative and fixed based on the user's scroll position. It "sticks" to a specified threshold (Ex: top: 0) within its container.

  • At first, the element behaves like relative.

  • When scrolling reaches a specified position, it behaves like fixed.

the above results shows that nav-bar used position:sticky; property and it mentioned that top:0; then the nav-bar scrolls normally until it reaches top:0px; position and once it reaches top:0; then it becomes sticky and it doesn't move for that entire page even we do scroll.

Z-index

The CSS z-index property sets the stacking order of elements on the "Z-axis". It determines which elements appear in front of or behind others when they visually overlap.

  • Higher z-index → comes to front. Lower z-index → goes behind.

Top comments (0)