CSS Positioning

Topic Overview

Sizing

Basic Layout The Box Model Boxing Sizing Min and Max Values TODO

Overflow

Dealing with Spills Overflow in Practice TODO

Borders

Drawing Edges Properties Radius Borders in Practice TODO

Padding

Giving Some Cushion Padding in Practice TODO

Margin

Adding Separation Margins in Practice TODO

Display

What You See... Properties Display In Practice TODO

Hidden

...And What You Don't Hiding in Practice TODO

Position

Placement on the Page Normal Position Relative Position Absolute Position Fixed Position Positioning in Practice TODO

Z-Index

The Z-Index and Layering Z-Index in Practice TODO

Float

Floating Clearing Float Float in Practice TODO

Dealing with Spills

example of overflow scrolling

We saw an example on the combing size types, where the text inside an element “overflowed” its containing box. We can choose to address this situation in a couple of ways:

Ignore it (boo!).
Resize our elements so they fit the content.
Tell the browser what to do with extra content.

In the latter option, we will use the “overflow” CSS property (overflow: ). This property takes one of three values:

visible; this is the default.
hidden; overflow content will be hidden.
scroll; scroll bars will be provided for overflow content.