Layout Review & Intro to the Position Property

Four Vital Layout Principles: A Review

Layout is one of the most difficult aspects of web design. Before trying to understand the position property, be sure that you review and clearly understand the following:

  1. Inline vs. Block

    1. blocks stack; inlines flow in a line.
    2. blocks typically contain and other elements; inlines typically don't contain other elements and should be contained.
    3. blocks are as wide as their parent container by default; inlines are as wide as their content by default.
    4. block top/bottom margins/padddings push against each other; inlines top/bottom margins/paddings do not push against each other.
    5. block element widths & heights can be set; inline heights and widths cannot be set.
    6. the bottom line is that inline elements are harder to control and style.
    7. the display property can be set to inline or block. In other words, you can make block elements behave like inline elements or vice versa.
    8. some commone inline elements are: a, img, strong, em, abbr
  2. The Box Model

    1. all content is inside a box with an invisible border
    2. padding lives between the content and the border
    3. margin lives between the border and other elements
    4. all elements push on each other "in the flow" unless the position property takes them out of the flow
  3. The 4 Consequences of Float

    1. moves an element as far left or right as possible (based on its parent)
    2. causes all the elements which come after to wrap
    3. causes parent element to collapse to height of zero.
    4. causes an element whose width is not set to be as wide as its widest content
  4. Clear = 'Don't Wrap'

    1. {clear: left;} prevents elements from wrapping around left floated elements.
    2. {clear: right;} prevents elements from wrapping around right floated elements.
    3. Guess what {clear: both;} does.

The Four Values of the Position Property

The CSS position property allows you to specify one of four positioning methods. The box model principles reviewed above should be used as your first line of defense, however, at times they are not powerful enough, and the 'position' property must be used.

  1. static

    example: see everything we've done up to this point in the semester
    • static is the default method for most elements, so this is the method you should be the most familiar with.
    • static elements are in 'the flow,' meaning they occupy space and therefore 'push' against one another.
    • top, bottom, left, right have no effect
    • holds place in flow
    • no z-index
  2. fixed

    example: see social media links on brotherjudkins.com
    • fixed to viewport (doesn't scroll)
    • taken out of the flow
    • size properties change
    • overrides float & clear
    • may set top or bottom, left or right
    • enables z-index
  3. relative

    • relative to its original position
    • size properties do not change
    • may set top or bottom, left or right
    • holds place in flow
    • enables z-index
    • becomes the new reference point to absolute positioned descendents
  4. absolute

    • positioned in reference to its nearest relative/absolute ancestor
    • top or bottom, left or right
    • size properties change
    • taken out of the flow
    • overrides float & clear
    • enables z-index