Another important point is that when an element is positioned, it establishes a containing block for its descendant elements. For example, we could absolutely position an element and then absolutely position one of its children, as shown in Figure 9-23.

Figure 9-23

Figure 9-23. Nested absolutely positioned elements

The small box B in the lower-left corner of the element A is a child of A, which is in turn a child of a relatively positioned DIV. B was absolutely positioned, as was element Sunday 19th of November 2017 10:08:14 PM

by Eric A. Meyer
ISBN 1-56592-622-6
First edition, published May 2000.
(See the
catalog page for this book.)

Search the text of Cascading Style Sheets: The Definitive Guide.

Table of Contents

Copyright Page
Preface
Chapter 1: HTML and CSS
Chapter 2: Selectors and Structure
Chapter 3: Units and Values
Chapter 4: Text Properties
Chapter 5: Fonts
Chapter 6: Colors and Backgrounds
Chapter 7: Boxes and Borders
Chapter 8: Visual Formatting
Chapter 9: Positioning
Chapter 10: CSS2: A Look Ahead
Chapter 11: CSS in Action
Appendix A: CSS Resources
Appendix B: HTML 2.0 Style Sheet
Appendix C: CSS1 Properties
Appendix D: CSS Support Chart
Index
Colophon
Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

the trick:

.sidebar .head {font-size: larger; font-weight: bold;
text-decoration: underline; color: white;}

By using the contextual selector .sidebar .head, we ensure only those .heads inside a .sidebar will receive these styles. Since the entire sidebar is already set to use Verdana, the headings will inherit and use it. As for the links, they need to be yellow, so we declare:

top: 50%; bottom: 0; left: 50%; right: 0; margin: 10em;
top: 60%; bottom: 10%; left: 60%; right: 10%; margin: 0;

Again, the similarity would be only visual in nature.

By using negative values, it is possible to position an element outside its containing block. For example, the following values will lead to the result shown in Figure 9-3:

top: -5em; bottom: 50%; left: 75%; right: -3em;
Figure 9-3

Figure 9-3. Positioning an element beyond its containing block

Now let's see why leaving out width and

where color is one of two ways to specifythe color. The first way is to use percentages, and the second, whichuses numbers, is discussed later in this section.

Perhaps you want your H1 elements to be colored ashade of red somewhere between the values for red and maroon.red is simply rgb(100%,0%,0%),whereas maroon is more like(50%,0%,0%). In order to get a color between thosetwo, you might try this:

7.5.1. Percentage Values and Padding

As stated earlier, it's possible toset percentage values for the padding of an element. Percentages arecomputed in relation to the width of the parent element, so they canchange if the parent element's width changes in some way. Forexample, assume the following, which is illustrated in Figure 7-59:

P {padding: 10%; background-color: silver;}<DIV STYLE="width: 200px;"><P>This paragraph is contained within a DIV which has a width of 200 pixels,replication
takes effect. So if you want H1 elements to have
thin, black top and bottom borders with thick, gray side borders, and
medium, gray borders around P elements, this will
suffice, as we can see in Figure 7-42:

H1 {border-style: solid; border-width: thin thick; border-color: black gray;}
P {border-style: solid; border-color: gray;}
Figure 7-42

Figure 7-42. Borders have many aspects

By default, a single color value will be applied to all four sides,