1. Week 10 Creating Positioned Layouts

2. Positioning Elements
The CSS positioning properties give you control over the way element boxes are laid out in a Web page
You can control the positioning of the elements and remove them from the normal flow of elements on the page
You can also build pages that have elements positioned at different places in a Web page without using tables

3. Understanding the Normal Flow of Elements
The browser lays out element boxes from top to bottom and left to right until all elements that comprise the Web page have been displayed
In the normal flow for block-level elements, boxes are laid out vertically one after the other
Each box’s left edge touches the left edge of the containing element unless the box is floated or the layout model is right to left

5. Specifying Box Position Type
The position property lets you specify the type of positioning for an element if it will be something other than the default positioning type, which is static

7. Specifying Box Position Offsets
The box offset properties let you specify the exact positioning values for any element that has a position property set to absolute, fixed, or relative
div {position: absolute;
left: 130px;
top: 100px;
background-color: #ffcc33;}

9. Specifying Box Position Offsets (continued)
The following style rule shows the addition of the width property to further define the appearance of the element
div {position: absolute;
left: 130px;
top: 100px;
width: 100px;
background-color: #ffcc33;}

11. Absolute Positioning
When you specify absolute positioning, an element’s position is explicitly stated with respect to its containing box
An absolutely positioned element is removed from the normal document flow and has no impact on other elements
An absolutely positioned element establishes a new containing box for child elements

13. Fixed Positioning
The containing box for a fixed element is always the browser window
Fixed elements stay in the same place at all times, regardless of how the user scrolls the document
Fixing an element lets you create a frame-type layout, where a content element can be scrolled independently of an adjoining navigation element

15. Relative Positioning
The relative position value lets you shift an element from its default position in the normal flow to a new position within the browser window
The new position is relative to the element’s default position
The offset properties let you adjust the position of the element

17. Specifying Visibility
The visibility property specifies whether an element is displayed in the browser

18. Specifying Stacking Level
The stacking level is the ordering of elements on the z-axis, from front to back as the user faces the computer screen

21. Summary
CSS positioning properties can be used with programming scripts
The normal flow dictates the way in which elements normally are displayed in the browser window
When you remove an element from the normal flow, you may see unexpected behavior from other elements that are following the normal flow

22. Summary (continued)
Pixels are the most convenient measuring unit for offset values
Use the width and height properties to specify element sizes
Each containing box sets its own context for positioning
For example, an absolutely positioned box can contain elements that follow the normal flow

23. Summary (continued)
Fixed positioning “pastes” the element to one position, regardless of how the user scrolls
Relative positioning, stacking levels, and visibility are normally used with scripting languages to create dynamic effects