HTML and CSS Positioning, Floats, and Z-indexHTML and CSS - Positioning, Floats, and Z-index
Positioning, Floats, and Z-index
Getting into Position
Normal Flow
Containing Blocks
The Browser Viewport
Absolute Positioning: To the Root Element
Absolute Positioning: To Another Block
Relative Positioning
Fixed Positioning
Floating Elements
Clearing Floats
Z-index
Just Like a Pro…
The combination of technologies you'll be working with in this tutorial will provide you with the basis for what you need to know about creating great CSS-based layouts, instead of the table-based. Fortunately, contemporary browsers have enough CSS supportand we have enough knowledge of workaroundsto apply these techniques to create great-looking pages.
Positioning refers to the scheme in CSS that enables you to use elements to create boxes and move them around in relation to the document and browser.
Float refers to a CSS technique that places an element to the right or left.
A z-index serves as a means to place element boxes along the z-axis. As the x- and y-axes, with x being horizontal and y being vertical. The z-axis provides the third dimension.