Introduction to CSS Positioning

Positioning is used in conjunction with the box model to compose pages.

Position types

K08a - (time: 5:29)
- Two types of precise positioning:
  - Fixed
    - Will not move relative to the edges of the browser window.
    - The footer on this page is set to:
      - position: fixed;
      - With the position of bottom: 0;
  - Absolute
    - Will always be in the same position relative to the positioned parent's container.
    - The parent will be the body if no positioning is applied to a parent.
    - There is an absolutely positioned div in the upper right area of this document.
- Two types of relative positioning:
  - Static
    - This is the default.
    - It is not really static in the sense that, due to some factors, content can move around.
    - It actually causes the element to flow into the page's content as would normally occur by default.
  - Relative
    - The same as static, however it can be used to position an element relative to where it would normally be.
    - Kind of an "odd bird".
- All but static positioning can be positioned relative to their location:
  - An absolutely positioned element will be positioned relative its positioned parent's edges.
  - Fixed will be positioned relative to the browser window edges.
  - Relative will be positioned relative to where the element would have been if it had no or static positioning.
  - Such positions can be specified relative to the distance from these edges:
    - top
    - right
    - bottom
    - left

K08b - (time: 3:25)
- A browser's viewport is the area where the web page is seen. It excludes browser scrollbars, toolbars, buttons and other chrome.
- The viewport can be thought of as the über element through which all elements are seen.
- Scrollbars are provided when page content exceeds the size of the browser view area.
- Elements are positioned relative to their parent, their container.
  - If the parent is not positioned, then elements follow the flow of the document.
- All elements have an edge.
  - Block elements stretch the width of their container.
  - Inline elements stretch the width of their content.
- Element width and height are not the same as content size, which is determined by the actual content along with its padding, border and margin.
- A width and height can be set for a div tag that is empty.
- Example
  - The following has no content but it does have a width and a height of 100px each. It also has a left margin of 100px:

K08c - (time: 3:13)
- If the width and height set for an element are not adequate for displaying the content, the condition is referred to as overflow.
- Here are the overflow property's options:
  - visible
    - Content will be visible, but will spill outside the container and appear over other page content.
  - hidden
    - Hides content overflow, it will not be seen.
  - scroll
    - Will provide scrollbars even if they are not needed in order to see all content.
  - auto
    - Provides scrollbars when needed.
    - This setting is usually preferred.
- Don't miss this!
  - Examples of overflow