Jump to main content
Menu

Positioning, Part 1

Normal Flow and Positioned Layouts

  • By default, website content is in the normal flow of the document, which means that elements render on the page in the same sequence that they occur in the code.
  • In the normal flow elements do not (or should not) overlap.
  • Once an element has been positioned:
    • The element is no longer in the normal flow.
    • The element is 'out of phase' with the rest of the document and is completely unaware of, and unaffected by, anything else in the layout.
    • Box model settings for other elements have no impact on the positioned element.
    • Box model settings for the positioned element have no impact on any other elements.
    • The structural markup for the positioned element can occur anywhere in the HTML code.
    • The positioned element can overlap other elements.

CSS Properties Involved in Positioning

Property Usage and Effect Values Notes
position Determines whether an element is in the normal flow and how it is positioned.
  • absolute
  • fixed
  • relative
  • static (the default)
  • sticky
 By default every element is in the normal flow, which is position: static
top Determines how far up/down the positioned element is, relative to the top edge of the element used as the reference point.
  • Number and unit (e.g., px, em, %, rem)
 Positive values (e.g., top: 15px) move the positioned element down while negative values (e.g., top: -15px) move the positioned element up, resulting in it being above the reference point (or overlapping the reference point's top side).
bottom Determines how far up/down the positioned element is, relative to the bottom edge of the element used as the reference point.
  • Number and unit (e.g., px, em, %, rem)
 Positive values (e.g., bottom: 15px) move the positioned element up while negative values (e.g., bottom: -15px) move the positioned element down, resulting in it being below the reference point (or overlapping the reference point's bottom side).
left Determines how far left/right the positioned element is, relative to the left edge of the element used as the reference point.
  • Number and unit (e.g., px, em, %, rem)
 Positive values (e.g., left: 15px) move the positioned element to the right while negative values (e.g., left: -15px) move the positioned element to the left, resulting in it being to the left of the reference point (or overlapping the reference point's left side).
right Determines how far left/right the positioned element is, relative to the right edge of the element used as the reference point.
  • Number and unit (e.g., px, em, %, rem)
 Positive values (e.g., right: 15px) move the positioned element to the left while negative values (e.g., right: -15px) move the positioned element to the right, resulting in it being to the right of the reference point (or overlapping the reference point's right side).
visibility Determines whether the element is shown.
  • visible (the default)
  • hidden
  • inherit (look to the parent element for visibility setting)
 Hidden items still maintain their dimensions and impact other elements, if they are in the normal flow (this is different from display: none which removes the element entirely from the page rendering).

Hidden elements can also receive tab focus; elements instructed to display: none cannot receive tab focus.

This is used primarily with JavaScript navigation menus, which are absolutely positioned and hidden via this visibility property.
z-index Determines the stacking order of overlapping positioned elements; elements with higher z-index values are on top of those with lower z-index values.
  • Number with no unit specified (e.g., 3)
 Only necessary if overlapping is occurring.

If z-index is not specified, elements appear back to front in the order the CSS rules are specified (rules occurring later are on top of those given earlier).

If two elements overlap and have the same z-index value, the one whose CSS rule appeared later in the stylesheet(s) is on top.

Absolute Positioning

  • Elements instructed to position: absolute base their location on the first ancestor (parent / grandparent / great-grandparent / etc.) element they find that is also positioned.
  • If none of the ancestor elements are positioned, the reference point is <body></body> (representing the browser window itself).
  • Absolutely positioned elements are stationary once the page has loaded, so the user could scroll the browser window and the absolutely positioned element would scroll out of view.
  • Absolutely positioned layouts are typically comprised of block-level elements (such as <div></div>) for the major areas of the layout.

Absolute Positioning with the Browser Window as the Reference Point

See the Pen Absolute Positioning Based on Body by Jason Withrow (@jwithrow) on CodePen.

Absolute Positioning with Another Positioned Element as the Reference Point

See the Pen Absolute Positioning Based on Another Positioned Element by Jason Withrow (@jwithrow) on CodePen.

Considerations with the Second Positioning Example

  • The <aside></aside> is only contained by the <body></body> tag, so it bases its positioning off the browser window (specifically its top left, although we could use any side).
  • <nav></nav>, however, is nested within the <aside></aside> so it bases its positioning off of that element (specifically its top left, although we could use any side).
  • Also note that the calculation of where to place the <nav></nav> starts from within the border of the <aside></aside>, so if we wanted to have them perfectly top-align we would need the nav to have top: -1px