1
Cascading Style Sheets
Table of Contents
Cascading Style Sheets
Introduction - 3
Part I Reference
Chapter 1 - Basic CSS Concepts - 3
Chapter 2 - Values - 18
Chapter 3 - Selectors, Pseudo-Classes, Pseudo-Elements, and At-Rules - 24
Chapter 4 - Visual Media Styles - 35
Chapter 5 - Paged Media Styles - 124
Chapter 6 - Aural Media Styles - 134
Part II Summaries
Chapter 7 - Browser Compatibility - 151
Chapter 8 - CSS2 Quick Reference - 165
Chapter 9 - Useful Resources - 172
Cascading Style Sheets 2.0
3
Introduction
In the beginning, there was HTML. And it was pretty good, but not great. You couldn’t really create nifty
visual designs with it, which gave rise to table-based layout and single-pixel GIF tricks. And that was
pretty bad. So CSS was born, and it was very good—in theory, anyway. There was a long struggle to
make CSS a viable technology, thanks to imperfect interpretations of the specification, but lo! The day
arrived when CSS could be used without fear and dread. And the people rejoiced.
Thanks to CSS, designers can cut back on the FONT and table tricks they’ve been forced to cobble
together, and dramatically clean up their markup. With the coming of XHTML and XML, both of which
are deeply semantic and must rely on some styling mechanism to become visually appealing, CSS is
growing more and more popular. It’s a flexible, easy-to-understand language which offers designers a
lot of power. Because it reduces markup clutter, it makes pages easier to maintain. And its centralized
styling abilities lets designers adjust page layout with quick, easy edits of the styles, not dramatic
changes to the markup. In fact, CSS makes it possible to completely reshape the look of a document
without changing a single character inside the BODY element.
This book endeavors to efficiently describe the properties and values of CSS2, which was the latest
CSS standard when the book was written, and to provide details on property interactions, common
authoring mistakes, and other information which designers should find useful.
The text has been arranged to present basic concepts first, with details on important CSS algorithms
and behaviors (Chapter 1). This is followed with “core” information which describes the types of values
that can be used in CSS2 (Chapter 2), and the various ways in which elements can be selected for
styling (Chapter 3). This first part of the book does its best to describe the foundation of CSS, for the
rest of it would not function without the values and concepts presented.
The middle of the book (Chapters 4 through 6) is the largest portion, and is probably the area where
readers will spend the most time—all of the properties found in CSS2 are defined, described, and
annotated with notes. These properties are broken up into separate chapters, with Chapter 4 devoted to
visual-media properties, Chapter 5 to paged-media properties, and Chapter 6 to aural-media properties.
Each property is described in terms of its allowed values, its initial (or default) value, and other common
aspects. There are also detailed descriptions of the meaning of each allowed value, notes about how
the property works, examples of the property in use, and a list of related properties.
The final part of the book (Chapters 7 through 9) contains other useful information about CSS, including
a browser support chart, a CSS2 property quick reference, and a list of useful online resources.
Between the contents of this book and the resources provided, it should be possible to decipher any
CSS conundrums you may encounter. Although CSS can sometimes seem a bit mystifying, it is more
than worth the effort of learning its secrets. Enjoy!
Part I: Reference
Chapter List
Chapter 1: Basic CSS Concepts
Chapter 2: Values
Chapter 3: Selectors, Pseudo-Classes, Pseudo-Elements, and At-Rules
Chapter 4: Visual Media Styles
Chapter 5: Paged Media Styles
Chapter 6: Aural Media Styles
Chapter 1: Basic CSS Concepts
In order to comprehend how CSS affects the presentation of a document, there are some key concepts
that must be grasped. Once these are understood, even in part, it becomes easier to see how the
properties and values of CSS work. Do not, however, feel that you must completely understand
everything in this chapter before experimenting with CSS. In fact, it is better to review this chapter first,
then refer back to it as properties are used.
Cascading Style Sheets 2.0
4
Associating Styles with Documents
There are four ways to associate styles with a document. These range from associating a separate
stylesheet with your document to embedding style information in the document itself.
LINK Element
The LINK element is found in HTML and XHTML, and is used to associate an external stylesheet with a
document.
Generic Syntax
Attributes
rel=“...”
This attribute describes the relation of the LINKed file to the document itself. For external stylesheets,
there are two possible values: stylesheet and alternate stylesheet. Any LINK with a rel of
stylesheet will be used in the styling of the document. The value alternate stylesheet is used
to refer to stylesheets that are not used in the default rendering of the document, but which can, in
theory, be selected by the user and thus change the presentation. The user agent must provide a
mechanism to do so in order for this to work, and unfortunately most user agents do not provide such a
mechanism. This attribute is required.
href=“...”
The value of this attribute is the URL of the external stylesheet. Either relative or absolute URLs may be
used. This attribute is required.
type=“text/css”
This is used to declare the type of data which is being LINKed to the document. When associating a
CSS stylesheet, the only allowed value is text/css. Other stylesheet languages will call for different
values (e.g., text/xsl). This attribute is required.
media=“...”
Using this attribute, one can declare a stylesheet to apply only to certain media. The default value is
all, which means that the styles will be used in all media in which the document is presented.
Recognized values under CSS are all, screen, print, projection, aural, braille, embossed,
handheld, tty, and tv. Any number of these values can be used in a media attribute by formatting
them as a comma-separated list. This attribute is optional.
Note In this approach, the stylesheet is placed in its own file. Such files are usually
given an extension of .css, such as main-styles.css. The LINK element must be
placed inside the HEAD element in HTML and XHTML, but XML-based markup
languages may have other requirements.
Examples
STYLE Element
The STYLE element is found in HTML and XHTML, and is used as a container for an embedded
stylesheet.
Generic Syntax
STYLE Attribute
Under HTML and XHTML 1.1, any element can take a style attribute.
Generic Syntax
Note The value of this attribute is any combination of style declarations. Because this
approach binds the style very tightly to the element in question by placing stylistic
information within the document itself, use of the style attribute is discouraged in
those cases where a more robust solution (e.g., an embedded or external
stylesheet) can be used.
Examples
This paragraph’s text will be colored red.
This H1 will
assault your visual senses
@import Rule
@import is used to import an external stylesheet in a manner similar to the LINK element. See the
entry for @import in Chapter 3 for details.
Rule Structure
The basis of applying styles to documents is the rule. Each rule is composed of a number of
components, each of which has a specific name and function. These are summarized in Figure 1-1.
Figure 1-1: CSS rule structure
The selector is the part that determines which portions of the document will be matched by the rule. The
rule’s styles will be applied to the selected element(s). For example, a selector of pre means that all
pre elements will be selected. Multiple selectors can be grouped in a single rule by separating them
with commas. See Chapter 2 for details about the various selectors which may be used.
The declaration block is bounded by (and includes) a pair of curly braces. The selector is always to the
left of the declaration block (that is, it comes before the block). Whitespace within a declaration block is
ignored, so any amount of whitespace may be used by authors to make their styles more readable.
Cascading Style Sheets 2.0
6
Inside the declaration block are zero or more declarations. Each declaration consists of a property
followed by a colon, and then the value for the property followed by a semicolon. A value will consist of
one or more keywords and value types, usually (but not always) separated from each other by a space.
The allowed properties and their possible values are discussed in Chapters 4 through 6. There can
never be more than one property per declaration.
It is permissible to have an empty declaration block, in which case this rule will apply no styles to the
elements matched by the selector. This is functionally equivalent to not writing the rule at all. CSS does
not require that the last declaration in a declaration block be followed by a semicolon, but some early
CSS1 implementations would incorrectly fail to recognize any styles which followed a declaration block
that did not end with a semicolon.
Resolving Style Conflicts
In the course of creating a stylesheet, it is quite possible that many different rules will apply to a single
element. For example, if one rule applies to all paragraph elements, and another rule applies to all
elements which have a CLASS attribute with a value of urgent, which rule should be used?
As it happens, both rules will apply. If the different rules contain declarations that deal with different
properties, then there is no conflict, and the styles are “pooled together.” However, if different rules have
declarations that attempt to set values for the same property, then there are mechanisms to decide
which styles will actually be used.
As an example, assume the following three rules:
div#aside h1 {color: red; margin: 0.5em;}
h1.title {color: purple; font-weight: bold; margin-left: 3em;}
h1 {color: gray; font-style: italic;}
Now assume that the document contains an H1 element which is matched by all three rules. How
should it be styled? There are three contradictory values given for color, and there may be some
conflict between the margin rules as well.
As it happens, the answer is that our hypothetical H1 should be colored red, boldfaced, italicized, and
have top, right, bottom, and left margins of 0.5em. Thus, the declarations which were overruled were
color: purple, color: red, and margin-left: 3em. The mechanisms by which we arrived at this
answer are further explained in the next section.
Cascade Rules
In determining how to style a document, some declarations may conflict with each other. For example, if
two different declarations call for all paragraphs to be either red or blue, which one wins out? This
process is described by the cascade. The cascade rules are as follows:
1. Find all declarations that apply to the element and property in question, for the target media
type (i.e., do not apply print-media styles if the current media is screen). Declarations apply if
the associated selector matches the element in question. Thus, the declaration in the rule h6
{color: navy;} will be used only if the document contains one or more H6 elements.
2. The primary sort of the declarations is done by origin and weight. The origin refers to the
source from which the declaration comes: the author’s styles, the user’s styles, or the user
agent’s internal styles (hereafter referred to as the default stylesheet). An imported
stylesheet has the same origin as the stylesheet that imported it. The weight refers to the
importance of the declaration. For normal declarations, author stylesheets override user
stylesheets which override the default stylesheet. For “!important” declarations, user
stylesheets override author stylesheets which override the default stylesheet. “!important”
declarations override normal declarations. See “Importance” later in the chapter for more
details.
3. The secondary sort is by specificity of selector: more specific selectors will override more
general ones. Pseudo-elements and pseudo-classes are counted as normal elements and
classes, respectively. See “Specificity Calculation” later in the chapter for more details.
4. Finally, sort by order specified: if two rules have the same weight, origin, and specificity, the
latter specified wins. Rules in imported stylesheets are considered to be placed before any
rules in the embedded stylesheet.
Specificity Calculation
Every selector in CSS is assigned a specificity. The actual specificity is calculated based on the
composition of the selector itself, according to the following rules:
1. Count the number of ID selectors in the selector (= a)
Cascading Style Sheets 2.0
7
2. Count the number of other selectors and pseudo-class selectors in the selector (= b)
3. Count the number of element names in the selector (= c)
4. Ignore pseudo-elements
The concatenation of the three values (a-b-c) yields the specificity. Note that these numbers are not
represented in base ten; thus 0-0-11 is less than 0-1-0, even though they might be represented as “11”
and “10” respectively. It is for this reason that authors are encouraged to think of specificity as a
comma- or hyphen-separated list of three numbers. For example:
h1 {color: black} /* spec. = 0-0-1 */
div ul li {color: gray;} /* spec. = 0-0-3 */
pre.example {color: white;} /* spec. = 0-1-1 */
div.help h1 em.term {color: blue;} /* spec. = 0-2-3 */
#title {color: cyan;} /* spec. = 1-0-0 */
body ul#first li ol.steps li {color: silver;} /* spec. = 1-1-5 */
As detailed earlier in the section “Cascade Rules,” specificity is more important than the order in which
rules appear. Thus, if the following two selectors match the same element, the declarations from the first
will override any conflicting declarations in the second.
div.credits {text-align: center; color; gray;} /* spec. = 0-1-1 */
div {text-align: left; color: black;} /* spec. = 0-0-1 */
Therefore, the element which these two rules match will have gray, centered text.
Important declarations always outweigh non-important declarations, no matter the specificity of their
associated selectors (see the next section for more details).
Importance
Declarations may be marked as important using the !important construct. This is applied to the
actual declarations which are important, not to the selector nor to the rule as a whole. For example:
p {color: red; background: yellow !important; font-family: serif;}
In this example, only the declaration background: yellow is important. The other two declarations
are not.
If two or more important declarations involve the same property, then the conflict is resolved using
specificity calculations. For example:
h2 {color: red !important; font-style: italic;}
h2 {color: green !important;}
Since both color declarations are important, and both associated selectors have the same specificity,
the second rule wins because it comes later in the stylesheet. Thus, H2 elements will be green and
italicized—the font-style declaration is not affected in this case.
Inheritance
Many styles can be inherited from an element to its descendant elements. Any inherited style will be
applied to an element unless the property in question is explicitly set through a rule whose selector
matches the element. For example, consider these rules:
body {color: black;}
p {color: green;}
Given this, the color of any paragraph will be green, while the color of all other elements will be black.
Note that this overriding of inherited styles takes effect no matter what specificity or importance was
attached to the original rule. For example:
div#summary {color: black !important;}
p {color: green;}
Any paragraphs within a div whose id attribute has a value of summary will still be green, because the
explicitly assigned style overrides the inherited style.
However, all properties (except for page) can be given a value of inherit. This directs the user agent
to determine the value of the property for the parent element, and use that value for the current element.
Thus, p {color: inherit;} will set the color of any paragraph to be the same color as its parent.
Cascading Style Sheets 2.0
8
This has the advantages of upgrading the inheritance mechanism such that a style can be explicitly
assigned to inherit, instead of relying on the normal inheritance mechanism as a "fallback."
Shorthand Properties
There are a few properties in CSS which are considered shorthand properties; that is, they represent a
much larger collection of properties. For example, margin is a shorthand for the properties margintop,
margin-right, margin-bottom, and margin-left. The following two rules will have exactly
the same effect:
p {margin: 1em;}
p {margin-top: 1em;
margin-right: 1em;
margin-bottom: 1em;
margin-left: 1em;}
Because of this, authors must be sure to avoid conflicts between properties and shorthands, or even
between two shorthand properties. For example, consider the following two rules as matching the same
element:
pre.example {margin: 1em;}
pre {margin-left: 3em;}
Due to the operation of the cascade, any pre element with a class of example will have a margin
1em wide, including the left margin. The shorthand’s effects have masked out the value assigned in the
pre rule.
Another good example involves text-decoration, which is a shorthand for no properties at all but
acts much as a shorthand property does. Consider the following rules:
h2 {text-decoration: overline;}
h2, h3 {text-decoration: underline;}
Given these rules, all H2 elements will be underlined but not overlined. The given values of textdecoration
do not combine, as each combination of keywords is its own unique value. If it is desirable
to decorate H2 elements with both an underline and an overline, then the necessary rule is:
h2 {text-decoration: underline overline;}
Table 1-1 summarizes the shorthand properties in CSS and what properties they represent.
Table 1-1: Shorthand Properties
Shorthand property Represents
background background-attachment, background-color,
background-image, background-position,
background-repeat
border border-color, border-style, border-width
border-bottom border-bottom-color, border-bottom-style, borderbottom-
width
border-left border-left-color, border-left-style, borderleft-
width
border-right border-right-color, border-right-style, borderright-
width
border-top border-top-color, border-top-style, border-topwidth
cue cue-before, cue-after
font font-family, font-size, font-style, font-weight,
font-variant, line-height (will also reset font-sizeadjust
and font-stretch)
list-style list-style-image, list-style-position, liststyle-
type
margin margin-top, margin-right, margin-bottom, marginleft
outline outline-color, outline-style, outline-width
Cascading Style Sheets 2.0
9
Table 1-1: Shorthand Properties
Shorthand property Represents
padding padding-top, padding-right, padding-bottom,
padding-left
pause pause-after, pause-before
Visual Layout
Although it does contain sections for styling non-visual media, CSS is at its heart a style language for
visual presentation. Therefore, since authors will spend so much time worrying about the visual effects
of their styles, it is crucial to understand how these effects are constructed and laid out.
There are two basic layout mechanisms in CSS: the box model and the inline layout model. Although
they are related, each has its own rules and effects, not all of which are intuitive. In addition, there are
special rules to describe how positioned elements are laid out, and how floated elements are placed
and sized. These rules are closely modeled on the box model, but there are some important differences.
The Box Model
The fundament of visual display under CSS is the box model. Familiarity with the various components of
the box model enables the author to understand how a great many properties interact with each other,
and to understand why pages appear as they do (or to figure out what’s going wrong in buggy
browsers).
Basic Components
A diagram of the basic box model is shown in Figure 1-2.
Cascading Style Sheets 2.0
10
Figure 1-2: The CSS box model
Specific Layout Rules
The background of an element (whether color, image, or some combination) extends to the outer edge
of the border, thus filling the content area and the padding. It will also be visible through any “gaps” in
the border itself, such as those seen with the border-style values dotted, dashed, and double.
The following equation always holds true: margin-left + border-left-width + padding-left +
width + padding-right + border-right-width + margin-right = the value of width for the
parent element (that is, the width of the parent element’s content area). This must sometimes be
accomplished by setting the left and right margins to negative values. In such cases, the element will
appear to be wider than its parent element, and will "stick out" of the content area of its parent.
Mathematically, however, the negative margins satisfy the above equation, and so the element can be
said to be exactly as wide as the content area of its parent. This may seem disingenuous, since the
visual effect is precisely the opposite, but this is permitted under CSS.
Only the margins, height and width may be set to auto. The margins may be given negative
lengths, but height and width may not. The padding and border widths default to 0 (zero), and may
not be set to negative lengths.
Vertically adjacent margins of elements in the normal document flow are collapsed. In other words, if
two margins are vertically adjacent to each other, then the actual distance between the two element
borders is the maximum of the adjacent margins. In the case of negative margins, the absolute
maximum of the negative adjacent margins is subtracted from the maximum of the positive adjacent
margins. The vertically adjacent margins of elements which have been floated or positioned do not
collapse.
The mechanism of collapsing margins can be visualized as a paper- and-plastic model. In this model,
each element is represented by a piece of paper upon which the element’s content has been written (or
drawn). Any margins which surround the element are represented as strips of clear plastic attached to
the edges of the paper. When one element follows another, they are slid together until the edge of one
Cascading Style Sheets 2.0
11
element’s plastic strip touches the edge of the other element’s paper. Thus, the plastic will overlap, but
the pieces of paper will never be further apart than the width of the wider plastic strip. This holds true
even if multiple elements are adjacent, such as one list ending and another beginning. There are four
adjacent margins in this example, the bottom margins of the first list and its last list item, and the top
margins of the second list and its first list item. The distance between the content of the two list items
will be that of the largest of the four margins.
Recall that horizontally adjacent margins do not collapse. Thus, placing 10-pixel margins on two
adjacent inline elements will create a 20-pixel space between the right border of the first element and
the left border of the second. Margins on floated and positioned elements are never collapsed, either
horizontally or vertically.
The Inline Layout Model
Almost as fundamental as the box model is the way in which text is arranged within an element. While
this may seem simple, it quickly becomes complex once the details are laid bare.
Basic Components
A diagram of the basic inline layout model is shown in Figure 1-3.
Figure 1-3: The CSS Inline layout model
Specific Layout Rules
The height of a line of text is calculated using the following terms:
Content area The box defined by the font-size of each piece of text (whether in an
element or not)
Half-leading The distance determined by the value of line-height, where the
half-leading equals ((font-size - line-height)/2)
Inline box The box defined by subtracting the half-leading from the top and bottom
of the content area; for any given piece of text, the height of the inline box will always
be equal to the value of line-height for that same text
Line box The actual box which is stacked below the previous line box; this bounds
the top of the highest inline box and the bottom of the lowest inline box in the line
How does all this work? For each piece of text, an inline box is generated, using the content area and
the half-leading to arrive at its final height. These inline boxes will always be centered vertically within
the content area. The inline boxes are then aligned with respect to each other according to the value of
vertical-align for each. If the value is baseline, then the text baseline is aligned with the baseline
of the line.
Once the inline boxes have been vertically aligned, the height of the line box is determined. The line
box’s top is aligned with the top of the highest inline box top in the line, and the bottom of the line box is
aligned with the bottom of the lowest inline box in the line. The top of each line box is placed adjacent to
the bottom of the previous line box, or adjacent to the inner top edge of the parent element in the case
Cascading Style Sheets 2.0
12
of the first line box in the element. Thus the line boxes are “stacked” to form a block-level element’s
content.
In fact, each character generates its own inline box, but these should all have the same height for a
given element, so, in general, inline boxes are discussed at the element level.
Any border which is drawn around an inline element is placed such that it lies just outside the area
defined by the content area plus any declared padding. This has no direct relation to the line box itself;
the border may be drawn in the same place as the edges of the line box, but if so it is by coincidence. It
is entirely possible for an inline element’s border to “cut through” the text in the line, or through other
lines of text.
When it comes to borders, background, and other box properties, inline elements are formatted as if
they were a single line of text. Let’s start with the simplest analogy. Picture a given inline element: a
single strip of paper with the element’s content written upon it. Any backgrounds, borders, padding, and
so forth are applied to the inline element as per the box model. The strip of paper is then torn into
pieces between words such that each paper segment will fit between the right and left edges of the
block-level element’s content area. Therefore, borders will most likely not “cap off” the ends of any line
segments, except the left edge of the first line segment and the right edge of the last line segment.
Similarly, any right or left padding (or margin) will appear only on the last or first line segment,
respectively.
This analogy is only partly accurate. If all of the text in the inline element is the same size and has the
same vertical alignment, then the analogy is exactly correct. However, if this is not the case, then each
line’s height will be altered as described earlier in this section. In other words, some line segments could
be taller than others in the same inline element, due to the way line boxes are constructed. Otherwise,
the analogy holds; any left or right padding or margins will still be applied only to the first or last line
segments, respectively.
Setting top and bottom margins on non-replaced inline elements (e.g., elements which contain only text)
will have no effect on layout, as margins cannot affect the calculation of the height of a line box. Setting
a top and bottom padding may cause the background of the inline element to be increased, but the
specification is not clear about what should happen in such a case. It may be that the expanded
background will overwrite content in other lines of text, or even in other elements. It is also possible that
the backgrounds will be drawn “beneath” the content of other inline elements. User agents are permitted
to ignore top and bottom padding on inline elements.
Inline replaced elements (e.g., images within a line of text) are treated a little differently from text. The
inline box of a replaced element is defined to be the element plus any borders and margins. Thus, top
and bottom margins on inline replaced elements can affect the height of a line box.
Float Rules
When an element is floated, its visual placement is governed by a set of ten rules. In effect, these rules
say “place the floated element as high, and as far to one side, as possible.” However, the details are
important:
1. The left outer edge of a left-floating box may not be to the left of the left edge of its
containing block. An analogous rule holds for right-floating elements.
2. If the current box is left-floating, and there are any left floating boxes generated by
elements earlier in the source document, then for each such earlier box, either the left
outer edge of the current box must be to the right of the right outer edge of the earlier
box, or its top must be lower than the bottom of the earlier box. Analogous rules hold
for right-floating boxes.
3. The right outer edge of a left-floating box may not be to the right of the left outer edge
of any right-floating box that is to the right of it. Analogous rules hold for right-floating
elements.
4. A floating box’s outer top may not be higher than the top of its containing block.
5. The outer top of a floating box may not be higher than the outer top of any block or
floated box generated by an element earlier in the source document.
6. The outer top of an element’s floating box may not be higher than the top of any linebox
containing a box generated by an element earlier in the source document.
7. A left-floating box that has another left-floating box to its left may not have its right
outer edge to the right of its containing block’s right edge. (Loosely: a left float may
Cascading Style Sheets 2.0
13
not stick out at the right edge, unless it is already as far to the left as possible.) An
analogous rule holds for right-floating elements.
8. A floating box must be placed as high as possible.
9. A left-floating box must be put as far to the left as possible, a right-floating box as far
to the right as possible. A higher position is preferred over one that is further to the
left/right.
10. The top outer edge of the float must be below the bottom outer edge of all earlier leftfloating
boxes (in the case of clear: left), or all earlier right-floating boxes (in the
case of clear: right), or both (clear: both).
The margins of floated elements are never collapsed. Thus, even though an element may be floated
into the top left corner of its parent element, its margins will push it away from the corner, and will push
any content away from the floated element.
Even though floated elements are prohibited from being any higher than the top of the containing block,
there is a way around this. By setting a negative top margin, the element can be “pulled up” past the top
of its containing block. This is somewhat similar to the ability of elements to be wider than their
containing block through the use of negative left and right margins. As well, floating elements can be
pulled out of an element by setting a negative left or right margin. However, the user agent is not
required to reflow the document to account for this situation, so a floating element with negative margins
may overlap other content within the document. Authors are advised to use this technique very
cautiously.
Although floating elements are removed from the normal flow of the document, they do affect the layout
of content within the document. This is effectively done by increasing the padding within any following
elements on those lines which are next to a floating element. However, this means that the backgrounds
and borders
of any elements will extend “underneath” the floated element, and possibly past the other side of the
floated element. This behavior ensures that all element boxes will remain rectangular, but it can lead to
unwanted effects.
Positioning Rules
Although CSS started out as a way to style elements in the normal flow of a document, it quickly
became apparent that authors wanted to do more with their layouts. There were requests for a CSS way
to replace frames, methods to offset elements from their normal placement, and more. In response,
positioning was added to the specification in CSS2. There are really only three kinds of positioning:
static, relative, and absolute. Static positioning is the state of normality—in other words, an “unpositioned”
paragraph actually has a static position. Relatively positioned elements are offset from their
normal place in the document, while absolutely positioned elements are placed with respect to some
point, and they never move from that position.
Every positioned element is placed with respect to its containing block. This block can be thought of as
the positioning context for the positioned element. Every positioned element has its own unique
containing block. The way to determine such a block is explained in each following section.
Relative Positioning
Relative positioning is fairly simple in its execution. A relatively positioned element is offset from the
place it would ordinarily occupy in the normal document flow, and the space it leaves behind is
preserved. This makes it fairly likely that the positioned element will overlap other elements and their
content, or be overlapped by other elements, depending on the value of the property z-index. It is up
to the author to construct styles that avoid such situations, if desired.
Containing Block
The containing block of a relatively positioned element is the box it would have occupied in the normal
flow of the document (i.e., had it not been positioned).
Offsets
The distance of a relatively positioned element is set with the properties top, right, bottom, and
left. Positive values will push the element toward the center of its containing block, and negative
values will push it away. Thus, a positive value for top will push the element downward, while a positive
Cascading Style Sheets 2.0
14
value for bottom will move it upward. Negative values will reverse the directions. Similarly, a positive
value for left will push the element to the right, and a positive right value will move it to the left, with
negative values having the opposite effects.There are cases where the values of some properties will
clash with each other. For example, setting both top and bottom to 10px means that the element
should be moved both upward and downward by 10 pixels, which is not possible. Therefore, the
following rules are used:
1. If the properties top and bottom are both given an explicit value, then the value of
bottom is ignored.
2. If the properties left and right are both given an explicit value, then the value of
right is ignored in left-to-right languages. In right-to-left languages, left is
ignored.
Absolute Positioning
Absolute positioning actually covers two values of the property position. These values are absolute
and fixed. The only real difference between the two is the containing block used in each case;
otherwise, the rules explained in this section are the same for both.
In both cases, the positioned element is entirely removed from the normal flow of the document. This
makes it quite likely that the positioned element will overlap other elements and their content, or be
overlapped by other elements, depending on the value of the property z-index. It is up to the author to
construct styles that avoid such situations, if desired.
Containing Block
In the case of position: absolute, the containing block of the positioned element is the nearest
ancestor element which has a value for the property position other than static. If no such ancestor
No comments:
Post a Comment