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

Hiding in Practice

In the following example, this exact technique is used to create an “additional information” type box.

This same technique can be used for to create dropdown menus.

The following code is one solution to creating a horizontal menu with a dropdown. Notice in line 36, that the content is hidden. Lines 48-49, cause the menu to be displayed, and lines 53-62 are used to present and style the dropdown menu. (If you cannot see the line numbers, click the “Edit on Codepen” link in the top-right of the code window.)

Please study the following code to understand it better.