“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

Placement on the Page

The next property to explore as we learn how to build layouts is position (position: ).

The position property allows developers to specify how elements are positioned in the browser window.

Box Offset Properties

The position: property sets the type of “layout flow” elements will follow. When set to a value that allows for the relative or specific positioning of elements, developers can use the following “box offset properties” to set those positions;

top:
bottom:
left:
right:

Depending on the value of the position: property, these will act in different ways. However, they basic function serves to set the position of an element, through either relative units (i.e. em, %) or absolute units (i.e. px).