CSS: Positioning Elements

1. Overview
   1. Elements by default appear in the page's flow
   2. CSS position property gives developers more control over where elements should appear
2. Types of positioning
   1. Static positioning - default positioning
   2. Relative positioning - element positioned relative to the default location
      1. Move an element to a new position in relation to where it would have been displayed by default
      2. Use position:relative and change the top, bottom, left, or right values
      3. Example:

         Move <span style="position:relative; top:-1ex">UP</span>,
         <span style="position:relative; bottom:-1ex">DOWN</span>,
         <span style="position:relative; left:-1ex">LEFT</span>, and
         <span style="position:relative; right:-1ex">RIGHT</span>!!!!
         

         Move UP, DOWN, LEFT, and RIGHT!!!!
   3. Fixed positioning - element positioned relative to the viewport in a fixed location
      1. Detach element from normal flow and put at a precise location in the browser
      2. Example: Fixed appears in a fixed location in the bottom-right corner of the browser

         <span style="position:fixed; right:50px; bottom:5px; color:red">Fixed</span>
         

         Fixed
      3. Fixed positioned elements do not scroll with the browser contents
   4. Absolute positioning - element positioned relative to the nearest positioned ancestor
      1. Similar to fixed but element is positioned relative to a positioned container and element scrolls with page content
      2. Use position:absolute and speicify the distance from the top, bottom, left, or right margins of its containing block-level element
      3. If used outside of any positioned block-level element, it will be positioned relative to the browser's screen

         <span style="position:absolute; left:10px; top:5px; color:red">Absolute</span>
         

         Absolute See the word Absolute positioned 10 pixels from the web page's left edge and 5 pixels from the top of the web page
      4. When used inside a positioned block-level element, it is positioned relative to the element

         <div style="position:relative; left:20px; top:0px; border:1px solid green;
         		height:80px; width:300px">
         	<span style="position:absolute; left:10px; top:10px; color:red">Hooray!</span>
         	<img style="position:absolute; left:50px; top:2px" 
         		src="images/broncos_header.gif" alt="Denver Broncos" />
         </div>
         

         Hooray!
3. Rendering order
   1. Overlapping elements are layered based on their order in the document (last listed is on top)
   2. Use z-index to control layering where higher z-index values appear on top

      <div style="position:relative; left:20px; top:0px; border:1px solid green;
      		height:80px; width:300px; z-index:2">
      	<span style="position:absolute; left:10px; top:10px; z-index:2; 
      		color:red">Hooray!</span>
      	<img style="position:absolute; left:50px; top:2px; z-index:1" 
      		src="images/broncos_header.gif" alt="Denver Broncos">	
      </div>
      

      Hooray!