0
0
CSSmarkup~5 mins

Position static in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Position static is the default way elements are placed on a webpage. It means elements follow the normal flow, like blocks stacking one after another.

When you want elements to appear in the normal order on the page.
When you don't need to move elements around manually.
When you want simple layouts without overlapping content.
When you want the page to flow naturally on different screen sizes.
Syntax
CSS
selector {
  position: static;
}

Static is the default position for all elements if you don't set position.

Top, bottom, left, and right properties do not work with position static.

Examples
This sets the div to the default static position, so it flows normally.
CSS
div {
  position: static;
}
The paragraph stays in normal flow and text color changes to blue.
CSS
p {
  position: static;
  color: blue;
}
Sample Program

Two colored boxes are stacked vertically because position static keeps them in normal flow.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Position Static Example</title>
  <style>
    .box1 {
      width: 8rem;
      height: 8rem;
      background-color: lightcoral;
      position: static;
      margin-bottom: 1rem;
    }
    .box2 {
      width: 8rem;
      height: 8rem;
      background-color: lightseagreen;
      position: static;
    }
  </style>
</head>
<body>
  <main>
    <section>
      <div class="box1">Box 1</div>
      <div class="box2">Box 2</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Position static ignores top, bottom, left, and right properties.

Use position static when you want simple, natural layouts without manual positioning.

Summary

Position static is the default and places elements in normal page flow.

It does not allow moving elements with top, left, bottom, or right.

Use it for simple layouts where elements stack naturally.