Chapter 13

Positioning: Relative and

Absolute

Contents

13.1 Directional Adjustments.............. 139

13.2 Elements Retained In Flow............ 140

13.2.1 position: static;.................... 140

13.2.2 position: relative;................... 141

13.3 Elements Removed From Flow.......... 141

13.3.1 position: absolute;.................. 141

13.3.2 position: fixed;.................... 142

13.4 Elements that Overlap / Underlap (z-index).. 143

13.5 Centering....................... 144

13.6 Dynamic Repositioning: Hover Effects...... 144

Normally the content of a webpage simply flows from top to bottom. We
do get a bit fancy with float left and float right, but everything pretty much
just flows down the page.

Sometimes we want to get really fancy. We want to have a menu bar that
stays in the same place, at the top, bottom, left, or right side of the viewport,
no matter how the rest of the content scrolls.

Or we may want to do drop-down menus that only appear when the mouse
hovers over the menu heading. In section 15.6 (page 159) we illustrate this.

138