HTML & CSS Course
HTML & CSS
/
Beginner

Static

Definition

The default positioning behavior of all HTML elements. Elements render in order, as they appear in the document flow.

Explain Like I'm New

It means 'Follow the normal rules of gravity'. The first paragraph sits at the top. The second paragraph sits directly below it. You cannot use coordinates (like `top: 50px` or `left: 20px`) to move a static element.

Real World Example

90% of the elements on a standard webpage (paragraphs, images, standard divs) are statically positioned.

Common Use Cases

  • •Default document flow

Interactive Example

Interview Questions

basic

  • If an element is `position: static`, what happens if you apply `top: 50px` to it?

intermediate

  • Does a static element have a `z-index`?

Flash Cards

Question

What happens?

Click to reveal answer
Answer

Absolutely nothing. Static elements completely ignore `top`, `bottom`, `left`, `right`, and `z-index` properties.

Question

z-index?

Click to reveal answer
Answer

No. To use `z-index` (layering things on top of each other), the element must have a position other than static (like relative, absolute, or fixed).