Key Concepts In Positioning Elements

Building Blocks

• CSS treats each HTML element as if it is in its own box.
• This box will either be a block-level box or and inline box.

  Containing Elements

• If one block-level element sits inside another block-level element then the outer box is known as the containing or parent element.

  Block-Level Elements

• start on a new line. Example include: <h1>, <p>, <ul>, <li>

  Inline Elements

• Flow in between surrounding text. Example include: <img>, <b>, <i>

Controlling The Position of Elements

• CSS has the following positioning schemes that allow you to control the layout of a page.
  • Normal flow
  • Relative positioning
  • Absolute positioning
• You specify the positioning scheme using the position property in CSS.
• You can also float elements using the float property.

Normal Flow

• In normal flow, each block-level element sits on top of the next one.
• Since this is the default way in which browsers treat HTML elements, you do not need a CSS property to indicate that elements should appear in normal flow, but the syntax would be position: static.

Relative Flow

• Relative positioning moves an element in relation to where it would have been in normal flow.
• Ex. You can move it 10 pixels lower that it would have been in normal flow or 20% to the right.

Absolute Positioning

• When the position property is given a value of absolute, the box is taken out of normal flow and no longer affects the position of other elements on the page.
• The box offset properties specify where the element should appear in relation to its containing element.

Fixed Positioning

• Fixed position is a type of absolute positioning that requires the position property to have a value of fixed.
• It positions the element in relation to the browser window.
• Therefore, when a user scrolls down the page, it stays in the exact same place.
• It is a good idea to try this example in your browser to see the effect.