BodinglesTM - -   Bright Lightbulb Graphic Ideas   - -

Full Stack MERN Web Development

CSS Static Positioning

Return to CSS Positioning Index

    Static Positioning
  • DEFAULT positioning style for HTML
  • Normal "Block" element flow
    • Follows the "Normal" page flow
    • Top to Bottom, Left to Right
  • Positioning attributes such as Left, Right, Top, and Bottom have no effect

  • Static Positioning is implied if a "position" is not specified
  • Elements are laid out in HTML order
    • Display Type
    • Margins
    • Padding
    • Border controls
  • Static positioning is the "baseline" for all other positioning types

    When to use
  • Normal document flow shouldn't be disrupted
  • No need for layering or moving elements from the normal flow
  • Creating a basic webpage layout, where the default flow is maintained

    Important Rules
  • Static positioning is default so there is no need to declare
  • Use other positioning for moving elements from the natural flow
  • The normal flow is useful for responsive design with natural "stacking"

    Summary
  • Static positioning is the "standard" HTML/CSS layout
  • It follows the source code order, and is the starting point for CSS positioning
  • Follows the normal document flow, of top to bottom
  • It is affected by "Box Model" , not "Offset Properties
  • Use for straightforward, natural order layouts without complex positioning

Back to Top