3 An ID selector called #second sets the pixel positions for a blue block that will be absolutely positioned 30 pixels from the top of the window, 60 pixels from the left side, and have
Trang 114.10 Positioning Elements and Layers
One of the most important features of CSS is the ability to position objects on a page, to
5 <td>Baby Bear</td>
</tr>
</table>
</div>
</body>
</html>
E X P L A N A T I O N
1 When a table is defined, the data cells will take on this style only if the <em> tag
is used within the cell See line 3
2 The <em> tag used within this <h1> tag is not affected by the contextual selector
because it is not within a table cell; that is, it is out of context
3 The <em> tag is embedded within a <td> tag The table’s data will follow the style
defined on line 1; it is in context
4 This table cell is not using the <em> tag, so will not be affected by the style rule
on line 1 It can only be affected if in context
5 This table cell will not be affected by the style rule either because it doesn’t use
the <em> tag See Figure 14.22.
Figure 14.22 A table cell is defined by the contextual selector.
E X A M P L E 1 4 2 1 (C O N T I N U E D)
Trang 2move objects to different sections of a page, move text and images, create animation,
cre-ate tooltips, scrolling text, and more Normally when you place tags in an HTML
docu-ment, the flow is from top to bottom Now, with style sheets, you can set the position of
an element, even layering one on top of the other (see Table 14.12)
A note about Netscape layers Netscape 4 introduced layer (<layer></layer>) tags, a
prototype of CSS positioning, to control the position and visibility of elements on a page,
and then with Netscape 6 abandoned the whole thing This book does not address the
Netscape layer technology because it is really a thing of the past However, the term
“layer” is still in use, and is used to refer to objects using the id attribute
14.10.1 Absolute Positioning
Absolute positioning places an element in a specific location on the page and can be
used to achieve full animation; for instance, moving an image across a page It is used to
specify the absolute coordinates (x,y) of the element in terms of the browser window
itself The top and left properties are used to determine the coordinates (see
Figure 14.23) If not specified, the browser will assume the top left corner of the browser
window, where x is 0 and y is 0 The top left corner of the window is position 0,0 and
the bottom right corner depends on the resolution of the screen If the screen resolution
is set to 800 pixels in width and 600 pixels in height, the bottom right corner is
posi-tioned at coordinates 800, 600
If an absolutely positioned element is nested within another absolutely positioned
element, it will be positioned relative to that element
Table 14.12 Positioning Styles
Property What It Specifies
bottom, right The placement of the bottom, right edges of an element.
clip A specified region of the element that will be seen
display Whether an element is displayed
overflow What to do if there is an overflow; that is, there isn’t enough space for the
element
position How to position the element on the page
top, left The placement of the top, left edges of an element
visibility Whether an element can be seen
width, height The size in width and height of an element’s content, not additional padding,
margins, borders, and so forth
z-index The third dimension in a stack of objects.
Trang 3Figure 14.23 Absolute positioning.
E X A M P L E 1 4 2 2
<html>
<head>
<title>layers</title>
<style type="text/css">
background-color: red;
border-style: solid;
font-weight:bold;
top: 20;
left: 20;
height: 100;
width: 100;
}
background-color: blue;
border-style: solid;
font-weight:bold;
top: 30 ;
position: absolute;
left: 60;
height: 100;
width: 100;
}
left
top
width
height height
Trang 4background-color: orange;
border-style: solid;
font-weight:bold;
top: 40 ;
position: absolute;
left: 100;
height: 100;
width: 100;
}
</style>
5 <body>
6 <p id="first">
First position
</p>
7 <p id="second">
Second position
</p>
8 <p id="third">
Third position
</p>
</body>
</html>
E X P L A N A T I O N
1 An ID selector called #first sets the pixel positions for a red block that will be
ab-solutely positioned 20 pixels from the top of the window, 20 pixels from the left
side, and have a size of 100 × 100 pixels (width × height)
2 The position attribute is specified as absolute It is independent of all other
ele-ments in the body of this document
3 An ID selector called #second sets the pixel positions for a blue block that will be
absolutely positioned 30 pixels from the top of the window, 60 pixels from the left
side, and have a size of 100 × 100 pixels (width × height) The blue box will
ap-pear to be layered over the red one
4 An ID selector called #third sets the pixel positions for an orange block that will
be absolutely positioned 40 pixels from the top of the window, 100 pixels from
the left side, and have a size of 100 × 100 pixels (width × height) The orange box
will appear to be layered over the blue one
5 The <body> serves as the container for three objects The red, blue, and orange
boxes will appear in the window at the absolute positions assigned to them in
re-lationship to their container, the body of the document
Continues
E X A M P L E 1 4 2 2 (C O N T I N U E D)
Trang 5Top, Left, Bottom, Right—Absolute Positions. As shown in Example 14.22, once
the position has been set, the left, top, right, and bottom attributes can be used to specify
exactly where on the page the element should be located Although we used left and top
to define the position of the element within the body of the document, right and left
bot-tom can also position the element on the page In the following example, four elements
are placed in different fixed positions in the document If you change the size of the
win-dow, the boxes will appear to be located in different places than shown in the output of
this example, Figure 14.25 That is because the fixed positions are relative to the
dimen-sions of the document’s window For example, if you shrink the window horizontally,
and the boxes are positioned 10 pixels from the bottom, they are still 10 pixels from the
bottom of the document, and the boxes at the top are still 10 pixels from the top, giving
the appearance that they have moved much closer together If the window is shrunk
enough either vertically or horizontally, the boxes might even overlap to maintain their
absolute positions, as shown in Figure 14.26
6 The paragraph element is positioned and styled according to the rule for the first
ID selector
7 The paragraph element is positioned and styled according to the rule for the
sec-ond ID selector.
8 The paragraph element is positioned and styled according to the rule for the third
ID selector See Figure 14.24
Figure 14.24 Three layers based on absolute positioning (Internet Explorer 8, Firefox).
E X A M P L E 1 4 2 3
<html>
<head>
<title>layers</title>
<style type="text/css">
<! E X P L A N A T I O N (C O N T I N U E D)
Trang 6background-color: red;
border-style: solid;
font-weight:bold;
position: absolute;
top: 10;
right: 100;
height: 100;
width: 100;
}
background-color: blue;
border-style: solid;
font-weight:bold;
position: absolute;
top:10;
left:400;
height: 100;
width: 100;
}
background-color: orange;
border-style: solid;
font-weight:bold;
position: absolute;
top: 10;
left: 200;
height: 100;
width: 100;
}
background color: yellow;
border-style: solid;
font-weight:bold;
position: absolute;
bottom: 10 ; right: 40;
height: 100;
width: 100;
}
</style>
</head>
5 <body>
6 <p id="first">
First position
</p>
Continues
E X A M P L E 1 4 2 3 (C O N T I N U E D)
Trang 77 <p id="second">
Second position
</p>
8 <p id="third">
Third position
</p>
9 <p id="fourth">
Fourth position
</p>
</body>
</html>
E X P L A N A T I O N
1 An ID selector called #first sets the pixel positions for a red block that will be
ab-solutely positioned 10 pixels from the top of the current window, 100 pixels from
the right side, and have a size of 100 × 100 pixels (width × height)
2 An ID selector called #second sets the pixel positions for a blue block that will be
absolutely positioned 10 pixels from the top of the window, 400 pixels from the
left side, and have a size of 100 × 100 pixels (width × height)
3 An ID selector called #third sets the pixel positions for an orange block that will
be absolutely positioned 10 pixels from the top of the window, 200 pixels from
the left side, and have a size of 100 × 100 pixels (width × height)
4 An ID selector called #fourth sets the pixel positions for a yellow block that will
be absolutely positioned 10 pixels from the bottom of the window, 40 pixels from
the right side, and have a size of 100 × 100 pixels (width × height)
5 The body is called the container for the elements within it The red, blue, orange,
and yellow boxes will appear in the window at the absolute positions assigned to
them in relationship to their container, the body of the document If you change
the size of the window, the boxes are fixed to the absolute positions, making it
seem as though the boxes have moved They are aligned to the fixed pixel
posi-tions from the top, bottom, right, and left sides of the current sized window
6 The paragraph element is positioned and styled according to the rule for the first
ID selector, the top, right corner
7 The paragraph element is positioned and styled according to the rule for the
sec-ond ID selector, the left, bottom corner.
8 The paragraph element is positioned and styled according to the rule for the third
ID selector, the top, left corner
9 The paragraph element is positioned and styled according to the rule for the fourth
ID selector, the bottom right corner See Figure 14.26
E X A M P L E 1 4 2 3 (C O N T I N U E D)
Trang 814.10.2 The <div> Container
One of the most important containers is the <div> It serves as a generic block-level
con-tainer where you can put other elements and give them color, borders, margins, and so
forth It is most useful when used with CSS, allowing you to easily change the contents of
the div for an entire site A site, for example, is often divided up into a header, navigation
Figure 14.25 Blocks are absolutely positioned based on pixels from top, bottom,
left, and right.
Figure 14.26 Firefox: Absolute positions with four blocks Window height is changed
and boxes overlap.