CSS Positioning

Positioning Elements

  • position: The position property allows one specify the positioning type of an element.
    • static – It is unpositioned, this is the default.
    • relative – Relative to where they would normally appear.
    • absolute – the element has been removed from the normal flow; it is positioned relative to its parent element, or if parent element is static, to the viewport.
      • You cannot float an absolute image.
    • fixed – the element is positioned in relation to the viewport.
    • sticky – positioned relative to nearest ancestor with scrolling box or to the viewport. Support is limited.
  • CSS can be added inline, in the head (between <style></style>) or via a linked stylesheet (css” rel=”stylesheet” href=”css_file.css” />).
  • Selectors – “A selector designates exactly which element or elements within our HTML to target and apply styles”
    • All HTML elements are selectors.
    • element { styling }
    • Type Selectors – Allows for selecting all elements of one type.
    • Class Selectors – Selects a group of elements.
      • Use a leading period before class name
      • .my-class { styling }
    • ID Selectors – Target one unique element.
      • Use a leading hash sign before class name
      • #my-id { styling }
  • Properties – “a property determines the styles that will be applied to that element.”
    • element { property: value; property: value; }
    • An element can be any HTML tag (minus <>)
  • Values
  • Linking Stylesheet – <link rel=”stylesheet” href=”main.css”>
  • Display Property – Each element has a default display type.
    • Block Level Element – e.g., <div>
    • Inline Element – e.g., <span> – It only takes up as much width as it needs; thus multiple blocks can appear on the same line.
    • None – This removes the element from the rendered code, whereas visibility: hidden only makes the the code disappear.
  • Margin Property – When used with a defined width value, keeps the defined element from growing too wide.
    • Using auto will center.
    • margin-top;
    • margin-right;
    • margin-bottom;
    • margin-left
    • Note they move in a clockwise pattern
    • Shorthand: margin: 1px 1px 1px 1px;
  • Padding Property – Space between the content and the border.
    • Can use padding-top, etc.
    • Or padding: 1px 1px 1px 1px;
    • Operates clockwise (top, right, bottom, left)
    • Give value only once in padding if all four sides are equal
  • Float Property – left, right
  • Clear – left; right; both – Tells an element to get out of the way of elements floating on the left/right, so it moves below them.
  • Max-Width Property – This can be used instead of width, this keeps elements from being too large to display on smaller screens (thus requiring scrolling).
  • The Box Model – An element displays as the sum of its width, padding, and border, thus the final desired size of the element includes all three of these properties added together.
    • Think of each element as being a box.
    • By default elements take up the full width of a page.
    • You can use display to change that (block; inline-block; inline; none)
    • Margin is the space outside of the element and is transparent, it determines how far away one element is from another.
    • Border
    • Padding is the space between the element and its border.
  • Box Sizing Property – Avoid the math of the box model by setting box-sizing to border-box which means the padding and border are included within the width of the element.
  • Position Property – The default position is static which is “not positioned”, all other positions are “positioned.”
    • static – Usually default.
    • relative – Positions relative to where it would have fallen if it was static.
    • fixed – Remains in the same position relative to the viewport, thus is always at the same place no matter where on the page one is currently scrolled to.
    • absolute – Uses its ancestor element (that isn’t static) rather than the viewport for positioning.