CssConceptBeginner · 3 min read

What is position static in CSS: Explanation and Examples

position: static is the default positioning for HTML elements in CSS, meaning elements follow the normal page flow without any special positioning. It does not allow offset properties like top, left, right, or bottom to move the element.

⚙️

How It Works

Imagine a line of people standing in a queue. Each person stands right behind the one before them, following the natural order. This is how position: static works in CSS. Elements are placed one after another in the order they appear in the HTML, just like people in a line.

With position: static, elements do not move from their normal spot on the page. They do not respond to offset properties like top or left. Instead, they flow naturally with the content around them, making the page layout predictable and simple.

This default behavior ensures that elements stack vertically or horizontally depending on their display type, without overlapping or floating away.

💻

Example

This example shows three boxes with position: static. They appear stacked in the normal flow, ignoring any top or left values.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position Static Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
    position: static;
    top: 20px; /* This will be ignored */
    left: 20px; /* This will be ignored */
  }
</style>
</head>
<body>
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</body>
</html>

Output

Three light blue boxes stacked vertically with space between them, ignoring the top and left offsets.

🎯

When to Use

Use position: static when you want elements to follow the normal flow of the page without any special positioning. This is the default for all elements, so you usually don’t need to set it explicitly.

It is best when you want a simple, clean layout where elements stack naturally, such as paragraphs, headings, or list items. Avoid using offset properties with static positioning because they won’t have any effect.

For example, in a blog post or article, most text and images use static positioning to keep the content easy to read and well organized.

✅

Key Points

Default position: All elements start with position: static unless changed.
No offset effect: top, left, right, and bottom do not move static elements.
Normal flow: Elements appear in the order they are written in HTML.
Simple layout: Use static positioning for straightforward, predictable page structure.

✅

Key Takeaways

position: static means elements follow the normal page flow without special positioning.

Offset properties like top and left do not affect static elements.

It is the default position for all HTML elements.

Use static positioning for simple, natural layouts where elements stack in order.

Avoid setting offsets on static elements because they will be ignored.