1. MORE Cascading Style Sheets (The Positioning Model)

2. CSS (Box Model)
Remember that CSS views all HTML 5 elements as a rectangular box consisting of
A margin around the box
A border
Padding, which is the boundary from the content to the border of the box
The box’s content

3. CSS (Box Model)

4. CSS Box Model (Description)
margin – Whitespace (transparent) surrounding the border
border - A border inside the margin. The border is affected by the background color of the box
padding – Whitespace inside the border and outside the content
Padding is affected by the background color of the box
content - The content of the box, where text and images appear

5. Box Size The box size is controlled by two properties width height
Use relative measures to size around the parent window or browser window
Absolute values work too
height
Contents will overflow the box if the height is set

6. CSS Box Model (Margin) Margin appears outside of the border
Margins have no color They are always transparent
Use margins to create padding next to adjacent elements

7. CSS Box Model (Margin – Example)
Set all box margins
margin: 10px;
Set the individual box margins
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

8. Outline The outline property works like the border property
It appears outside of the border for emphasis
It has a style, color, and width
See BoxIntro.htm

9. Padding The space inside the border and surrounding the box content
Set all at once or the individual sides
padding-top
padding-bottom
padding-left
padding-right

10. Positioning Elements (Introduction)
So far, we have applied styles to format text or to format various box margins
Here, we are talking about how to explicitly position the box itself relative to other boxes
This discussion involves the concept of flow
Pay particular attention to the use of the <div> and <span> tags

11. Flow (Introduction 1) There are two types of flow (positioning) Block
Elements start on a new line
By default, they are the same width as their container
<div>, <p>
Inline
An element starts on the same line as the preceding element
<img>, <span>, <em>, etc..

12. Flow (Introduction 2)
It’s possible to control flow using the CSS position property
static
fixed
relative
absolute
float

13. Positioning (Static) Static Positioning (normal flow)
This is the default positioning method
Items are positioned according to the normal page flow
Left to right – top to bottom
The top, bottom, left, and right properties are not applied when static positioning is applied

14. Positioning (Fixed 1) Fixed Positioning
An element is positioned relative to the browser window or parent container
Elements will not move even if the browser contents are scrolled
Fixed elements are no longer part of the normal document flow

15. Positioning (Fixed 2)
Use properties (top, bottom, left, right) to specify the coordinate
Elements can overlap
Use the z-index property to control overlap
Larger values appear in front – smaller values appear in back
See FixedPositioning.htm

16. Positioning (Relative 1)
Relative Positioning
Elements are positioned “relative” to the normal position
Normal document flow is still used
Use properties (top, bottom, left, right) to specify the coordinate relative to the normal flow
Negative values move left
Positive values move right

17. Positioning (Relative 2)
A relative positioned element is positioned relative to its normal position
Use left, right, top, left to alter the position
Note that negative values are possible
left:-20px will move the box 20 pixels to the left
Relative positioning is typically used for containers such as <div>

18. Positioning (Relative 3)
Elements might overlap
Use the z-index property to specify which overlapping item is in front, and which is in back
The property has an integral value
Larger values appear in front of smaller values
See RelativePositioning.htm

19. Positioning (Absolute)
Element is positioned relative to
The first parent element that has a position other than static
Remember that static is the default
Or the browser window
Absolute positioned elements are removed from the normal document flow
Absolute positioning is often used with <div> containers
See AbsolutePositioning.htm

20. Floating Content
We often want text to wrap around an image or other element
This is the purpose of the float property
Elements are always floated horizontally
If an element is floated left, elements float from the left side of the browser window or container
The reverse is true when elements are floated from the right
See Floating.htm

21. Controlling Display (1)
The display property describes how elements will be displayed
block – elements are displayed as a block with whitespace above and below
inline – elements are displayed inside the current block on the same line
none – elements are not displayed and take up no space