CSS static

In CSS, the static value of the position property allows an element to be positioned following the normal flow of the page, meaning it appears where it would naturally occur on the page without any adjustments. The element won’t be affected by the top, bottom, left, and right properties.

Note: HTML elements are positioned static by default.

Syntax

position: static;

Example

This example demonstrates the static positioning of HTML elements.

Here is the HTML code:

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

Copy to clipboard
Copy to clipboard

Here is the CSS code:

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  position: static;
  top: 50px; /* Has no effect on the element */
}

Copy to clipboard
Copy to clipboard

Here’s what the above example’s output looks like:

In this example, box1 has no position property set, so it automatically uses position: static. On the other hand, box2 explicitly has position: static and top: 50px set. However, both elements will follow the normal document flow, meaning they will stack on top of each other, one after the other vertically.

Note: Other position values, such as relative or absolute can be used in this case to modify the position of the elements.