Jump to main content
Menu

Positioning, Part 2

Relative Positioning

  • Relative positioning places an element on the page relative to where it would have appeared in the normal flow (in other words, if it had not been positioned at all).
  • Note that the relatively positioned element still has the space reserved where it would have rendered statically, potentially causing gaps and empty areas in layouts if there is additional content in the normal flow.
  • An absolutely positioned element nested within a relatively positioned element will use the relatively positioned element as its reference point, which is the most useful role that relative positioning plays in page layout. In that case the left and top of the relatively positioned element are 0, because it is not moving from where it would have been located statically.

Relative Positioning Example

See the Pen Relative Positioning by Jason Withrow (@jwithrow) on CodePen.

Considerations with the Relative Positioning Example

  • Notice how the container elements are placing themselves as if both nav and aside are static (in the normal flow). That is how relative positioning works.

Relative and Absolute Positioning Example

See the Pen Relative Positioning As Reference Point for Absolute Positioning by Jason Withrow (@jwithrow) on CodePen.

Considerations with the Relative and Absolute Positioning Example

  • The outer container div is relative positioned, so it becomes the reference point for the absolute positioned elements inside. It is centered via auto left/right margins and having a width assigned (so that is handled entirely via the box model properties).
  • The copyright will always be below the content area because it is relative to where the content ends.
  • The space that the copyright would have used at the end of the main element is dead space; nothing in the normal flow will move into it.

Fixed Positioning

  • Fixed positioning is always based on <body></body> (the brower window).
  • Fixed positioning differs from absolute positioning in that the fixed positioned element is always in the same place in the browser window, regardless of how much scrolling has taken place. Absolutely positioned items scroll out of view because they are stationary.
  • Fixed position elements also do not trigger scrollbars on their own, so content in the fixed position element can get 'lost' if it is taller than the browser window height.

Fixed Positioning Example

See the Pen Fixed Positioning by Jason Withrow (@jwithrow) on CodePen.

Sticky Positioning

  • Sticky positioning, the most recently added variation, is an interesting blend of relative and fixed positioning.
  • If the user has not scrolled past the sticky positioned element, it renders as if it were relatively positioned.
  • Once the user scrolls past it, then the sticky positioned element becomes fixed and remains in the specified location (based on top, left, etc.) relative to the browser window.
  • For this to work properly, it is essential that the element(s) holding the sticky positioned elements be large enough that the sticky positioned elements have somewhere to move:
    • If you want sticky positioned left-side elements, the element(s) holding it must go far enough to the right that there is room for the sticky positioned elements to slide over as the user scrolls to the right.
    • If you want sticky positioned top elements, the element(s) holding it must be tall enough that there is room for the sticky positioned elements to slide down as the user scrolls down.
    • The sticky positioned elements will not go beyond the limits of the element(s) holding them - they will stop at the relevant boundary of those element(s).

Sticky Positioning Example

See the Pen Sticky Positioning by Jason Withrow (@jwithrow) on CodePen.

Considerations with the Sticky Positioning Example

  • Sticky positioning (and assiging top and/or left) for the thead cells and the th cells within tbody is the most important aspect of this example. That locks in those cells as one scrolls down and/or across.
  • Assigning a z-index of 2 to the thead cells ensures that they are above the th cells within tbody, which default to a z-index of 1. This is necessary so the very first cell in thead is above, rather than below, the tbody th cells as the first row locks in during vertical scrolling.
  • All the other styling (such as the nowrap on the th cells, turning off border-spacing, etc.) is purely for aesthetics and has no impact on the sticky positioning.

Advantages of CSS Positioning

  • Reduced need for the box model to create spacing and layout
    • This reduces file sizes and makes site updates and maintenance easier.
  • Overlap of page elements
    • Because positioned elements are removed from the normal flow of the document, they can now appear on top of one another and on top of normal flow elements.
    • This is often used in JavaScript-driven navigation menus.
  • Improved accessibility
    • Screen readers read files from top to bottom, so text at the top of the file is read first.
    • Since positioned elements are outside the normal document flow, the document text can be located at the top of the file, while the navigation bar can be located at the bottom of the file, even if they display on the page in the opposite sequence.
    • Within-page links to jump to the main page content (bypassing navigation) can be coded as the first content inside <body></body> and absolutely positioned at -9999px (or whatever negative number is desired). This puts the within-page link out of view (it is outside the browser's viewport), yet it will still be read first by assistive technology.

      Users tabbing through the page will encounter it, so you can also make it visible at that time by giving the :focus state for that anchor coordinates that make it visible (assuming it was the anchor that was positioned).

    • Positioning outside the viewport is preferable to using display: none or visibility: hidden on the link, because some screen readers ignore elements with display: none and/or visibility: hidden indicated.
  • Improved text positioning for search engine spiders
    • Closely tied in with the accessibility advantage, spiders may prioritize the first content encountered.
    • Move the elements with important text up to the top of the file.

Disadvantages of CSS Positioning

  • Fixed position elements can have content that is unavailable
    • If the browser window is too small, or the fixed position element too large, then part of the fixed position element could be out of view with no way to access it (unless you can tab down to links that are off the viewport, but you will be tabbing blindly).
  • Relatively positioned elements create gaps / empty spaces
    • If the relatively positioned element is moved away from its starting location (which is where it rendered in the normal flow), the space left behind will not have anything in the normal flow occupy it.

Troubleshooting Positioning Issues

  • "Losing" a positioned element
    • If a positioned element is not visible, it is probably behind something else in the layout.
    • Typically the position property was omitted for that element.
    • Specifying display: none on other elements should eventually reveal where the "lost" element is hiding. It is usually in the top left, which is where it rendered in the normal flow.
    • Turning on a border or outline for the positioned element can also help in finding it.
  • Specify and/or adjust width, height, or z-index of positioned elements
    • Always set a width and height for absolute, fixed, and sticky position elements.
    • Overlapping positioned elements can result in anchors within the lower elements ceasing to function (the higher level elements are on top of the anchors, thus "blocking" them from being clicked, but the elements have transparent backgrounds so you cannot see the overlap).
    • Adjusting width and/or height can prevent the overlap or z-index can move the element containing the anchors to the top of the stacking order.
  • If relative positioning is not working well, try the box model instead
    • Relative positioning can be a tricky approach to implement successfully.
    • In some cases manipulating margin and/or padding on a static nested element can prove equally successful without all the hassle. A negative margin, for example, could successfully shift the element.