Retour au cours

Lesson 44: Positioning Scheme: Static (The Default)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

44. Positioning Scheme: Static (The Default)

The position property dictates how an element is placed relative to the viewport, its parent, or other elements. Understanding the different schemes is vital for layout.

position: static

  • Behavior: This is the default positioning scheme for every HTML element.
  • Flow: Elements are positioned according to the normal flow of the document (block elements stack vertically; inline elements flow horizontally).
  • Top/Right/Bottom/Left: When position: static is active, the offset properties (top, right, bottom, left) have absolutely no effect.

html

I am static.

css .static-box { /* This declaration is redundant, but illustrates the default */ position: static;

/* These offset properties will be IGNORED */ top: 50px; left: 50px; }

Takeaway: If you find an element isn't moving when you set top: 20px;, check if its position property is still set to static.