See text at p. 439, but there is quite a bit more here.

There are various ways to make things, usually boxes, go where you want them.

1. Horizontal centering.
   1. Centering text: text-align: center;
   2. Centering a box:
      1. Give the box some width less then than 100%.
      2. Set margin-left: auto; margin-right: auto.
   3. Or, you can do the math yourself:
      1. Set the box width to a percentage w, then set its left margin to (100−w)÷2 percent.
      2. If you have a border, use box-sizing: border-box.
      3. This is more clever, but less general, since you must set your box width to a percentage.
2. By default, boxes stack top to bottom, and stay at the left.
3. You can move to the right using a left margin.
   [ Stairs Source ]
4. Placing boxes horizontally.
   1. Traditional device is to use float: right or float: left. This was intended to let text flow around a box (including an image). But it can be used to arrange boxes.
   2. display: inline-block makes boxes flow like fat characters.
      1. Use vertical−align: attribute. Usually attribute is top or bottom. The default is baseline, which usually is not what you want.
      2. If you intend the boxes to form a single row on the page, use white-space: nowrap to keep them from flowing.
   [ Horizontal Alignment Source ]
5. Relative positioning.
   1. Allows you to shift an object from its regular position.
   2. Surrounding objects are positioned as though it had not moved.
   3. position: relative then left: dimension, right: dimension, top: dimension and/or bottom: dimension to shift the element.
   4. Dimensions move the side “back”, so left moves the element right, and right moves it left. Top moves it down, and bottom moves it up.
   5. Dimensions may be negative, so the actual motion is the opposite way.
6. Absolute positioning.
   1. Sets the position “absolutely” inside the nearest container which is positioned in some way (not static).
   2. Set position: absolute, then left: dimension, right: dimension, top: dimension and/or bottom: dimension set the position relative to the upper left corner of the containing box.
   3. Surrounding material is positioned as if the box did not exist.
   [ Positioning Source ]
7. Fixed positioning.
   1. Similar to absolute, but relative to the browser window, not any enclosing box.
   2. This means won't move when you scroll.
   [ Fixed Positioning Source ]
8. Overflow.
   1. What to do with the content of a box that spills outside its container.
   2. Attributes are overflow: value, overflow−x: value and overflow−y: value, for all overflows, or to specify horizontal and vertical separately.
   3. Usual values are visibile (default), hidden and scroll.
   [ Overflow Source ]
9. Stacking.
   1. Boxes which don't use default position can land on top of each other.
   2. By default, the last one appears.
   3. Can control by assigning z−index: integer. Specifies a stacking order; the largest z-index is visible.
   [ Z-Index Source ]
10. Making elements disappear.
    1. This is not positioning, really, but sometime useful when making fancy arrangements.
    2. display: none. The box is not displayed, and takes up no space.
    3. visibility: hidden. The box is invisible, but still takes up its usual space.
    4. Often used with hover to make things appear when you point to something.
    5. But be careful about having to re-arrange the page when you move the mouse. Can get ugly.
    [ Box Hover Source ]
11. An Image Layout. [ Image Index Source Style Sheet ]
12. Menu Example. [ Menu Example Source ]
    
13. More Complex Menu Example. [ Menu Example Source Style Sheet ]