CSS Positioning

Learn how to control element positioning using CSS position properties

Static Positioning

Static positioning is the default value for all HTML elements. Elements withposition: static are positioned according to the normal flow of the document.

Key Characteristics:

  • Elements flow in the order they appear in the HTML
  • Top, right, bottom, left, and z-index properties have no effect
  • This is the default positioning for all elements
  • Elements remain in the normal document flow
Normal flow element 1
Normal flow element 2
Normal flow element 3
.element {
position: static; /* This is the default */
/* top, right, bottom, left have no effect */
}

Positioning Properties in Action

Example Code

/* Position Properties */
.element {
  /* Basic position values */
  position: static;    /* Default, normal flow */
  position: relative;  /* Positioned relative to normal position */
  position: absolute;  /* Positioned relative to nearest positioned ancestor */
  position: fixed;     /* Positioned relative to viewport */
  position: sticky;    /* Toggles between relative and fixed based on scroll */
  
  /* Offset properties (for non-static positioning) */
  top: 20px;
  right: 30px;
  bottom: 40px;
  left: 50px;
  
  /* Z-index for stacking context */
  z-index: 10;
}

/* Practical examples */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.sidebar {
  position: sticky;
  top: 20px;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
}

.tooltip {
  position: relative;
}

.tooltip::after {
  content: "Tooltip text";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

Practical Applications

Navigation Menu

.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
Logo
HomeAboutContact

Modal Dialog

.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2000;
}
Modal Content

Tooltip

.tooltip-container {
position: relative;
display: inline-block;
}

.tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.2s;
}
.tooltip-container:hover .tooltip {
opacity: 1;
}
Hover for tooltip
Tooltip text
< PreviousNext >