HTML and CSS Reference
In-Depth Information
Chapter 11
Positioning Elements Precisely
In this chapter, I'm going to discuss
CSS positioning
(sometimes referred to as CSS-P), which not only removes an
element from the flow of the document, but also allows you to position it with pinpoint accuracy. However, CSS
positioning is rarely appropriate for laying out complete pages. Web design is different from print layout, where
the dimensions of the page are immutable. Web pages need to be flexible.
The role of CSS positioning lies in creating effects, such as text disappearing behind a static image as you
scroll the page and elements that overlap each other. It's also useful for creating tooltips and drop-down menus.
This chapter covers the following:
•
Understanding the different types of positioning
•
Understanding the significance of the containing block
•
Fixing an element within the browser viewport
•
Using a combination of relative and absolute positioning to prevent misalignment
z-index
•
Setting the stacking order of positioned elements with
•
Creating tooltips and drop-down menus without JavaScript
clip
property to mask an element
•
Using the
How Does CSS Positioning Work?
The
float
property that you learned about in Chapter 7 takes an element out of the normal flow of the document,
but its position is still controlled by where it appears in the markup. You can't arbitrarily float an image alongside
text that's in a completely different part of the page.
CSS positioning takes a different approach by allowing you to remove an element from the flow of the
document and place it wherever you want on the page. But there's a catch—and a pretty serious one at that.
Once an element has been positioned, it ceases to interact with other elements on the page. So, you can't flow
other content around it or use margins to separate it from other elements that remain in the document flow. The
positioned element resides on a separate layer in front of the normal content. This introduces a third dimension
that allows you to make elements overlap.
To position an element, you use the
position
property in combination with the other properties listed in
Table
11-1
.
