CSS Position

CSS Positioning Explained

Learn how to control the placement and stacking order of elements on your page using CSS positioning properties.

The position Property

The position property defines how an element is positioned in the document. The top, right, bottom, and left properties are then used to determine the final location of positioned elements.

These offset properties (top, right, bottom, left) only affect elements whose position value is not static.

There are five main values for the position property:

position: static;

This is the default value. Statically positioned elements are laid out in the normal document flow. The top, right, bottom, left, and z-index properties have no effect on them.

position: relative;

An element with position: relative; is positioned according to the normal document flow, and then offset relative to its own normal position. The space the element would have occupied in the normal flow is preserved.

Use top, right, bottom, left to adjust its position without affecting the layout of surrounding elements.

.offset-box {
  position: relative;
  top: -10px; /* Moves 10px up from its normal position */
  left: 20px; /* Moves 20px right from its normal position */
  background-color: lightyellow;
}

Crucially, relatively positioned elements serve as the containing block for absolutely positioned child elements.

position: absolute;

An element with position: absolute; is removed from the normal document flow. No space is created for it in the page layout. It is positioned relative to its nearest positioned ancestor (an element whose position is anything other than static).

If no positioned ancestor exists, it is positioned relative to the initial containing block (usually the <html> element). Its final position is determined by top, right, bottom, left.

.container {
  position: relative; /* Establishes containing block */
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 50px;
  background-color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue */
}

Absolutely positioned elements can easily overlap other elements.

position: fixed;

Similar to absolute, fixed positioned elements are removed from the normal document flow. However, they are always positioned relative to the viewport (the browser window), not a positioned ancestor.

This means a fixed element stays in the same place even when the page is scrolled.

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 1em;
  z-index: 1000; /* Ensure it stays on top */
}

Common uses include fixed navigation bars, cookie banners, or ‘scroll to top’ buttons.

position: sticky;

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative until it crosses a specified threshold (defined by top, right, bottom, or left) within its containing block (the nearest scrollable ancestor). At that point, it becomes ‘stuck’ and behaves like fixed relative to that container.

.sticky-sidebar-heading {
  position: sticky;
  top: 10px; /* Sticks 10px from the top of the viewport/scroll container */
  background-color: white;
  padding: 0.5em 0;
  z-index: 100;
}

Useful for section headers that stick as you scroll down a page, or sticky table headers/columns.

Overlapping Elements: z-index

When elements are positioned outside the normal flow (absolute, fixed, relative with offsets, sticky), they can overlap.

The z-index property controls the stacking order of positioned elements. Elements with a higher z-index value appear in front of elements with a lower value.

z-index only works on positioned elements (not static). It accepts integer values (positive, negative, or zero).

.background-image {
  position: absolute;
  z-index: -1; /* Place behind other content */
  /* ... other styles */
}

.modal-dialog {
  position: fixed;
  z-index: 9999; /* Ensure it's on top of everything */
  /* ... other styles */
}

Note: If two positioned elements overlap and have the same z-index (or none specified, which defaults to auto), the element that appears later in the HTML source code will be displayed on top.

Stacking contexts can add complexity to z-index. Learn more on MDN.

Controlling Overflow: overflow

The overflow property specifies what happens if content overflows an element’s box (when the content is larger than the element’s dimensions).

• visible (default): Content overflows the box and may overlap other elements.
• hidden: Overflowing content is clipped and hidden.
• scroll: Overflowing content is clipped, and scrollbars are added (always, even if not needed).
• auto: Scrollbars are added only if content overflows.
• clip: Similar to hidden, but potentially faster as it forbids scrolling entirely.

.text-box {
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
  overflow: auto; /* Add scrollbars if text is too long */
}

Related properties overflow-x and overflow-y allow control over horizontal and vertical overflow independently.

Clipping Elements: clip-path

The modern way to clip an element to a specific shape is using the clip-path property. It creates a clipping region, making only the part of the element within the region visible.

It accepts various shapes like circle(), ellipse(), polygon(), or an SVG path.

.circular-avatar {
  width: 150px;
  height: 150px;
  clip-path: circle(50% at 50% 50%); /* Creates a circle clip */
  /* object-fit: cover; /* Often used with images */ */
}

.diagonal-clip {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); /* Custom shape */
}

Note: The older clip property is deprecated and should no longer be used. clip-path is the modern standard.

CSS Positioning Properties Reference

Property	Description	Common Values
position	Specifies the positioning method.	static | relative | absolute | fixed | sticky
top, right, bottom, left	Offset properties for positioned elements.	auto | <length> | <percentage>
z-index	Sets the stack order of positioned elements.	auto | <integer>
overflow, -x, -y	Specifies behavior for overflowing content.	visible | hidden | scroll | auto | clip
clip-path	Clips an element to a shape.	<basic-shape> | <geometry-box> | url() | none
cursor	Specifies the mouse cursor.	(various keywords like pointer, wait, help, etc.)

Explore these properties further on MDN Web Docs for comprehensive details and examples.