Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P36 ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (401.77 KB, 10 trang )
Box Properties
file:///G|/1/0672328860/ch09lev1sec4.html (15 von 15) [19.12.2006 13:49:10]
CSS Positioning
CSS Positioning
If using float to control how elements are laid out doesn't provide the measure of control you're looking
for, you can use the CSS positioning attributes. To position elements yourself, you first have to choose a
positioning scheme with the
position property. There are four positioning schemes, three of which you'll
actually use. The four are
static, relative, absolute, and fixed.
The
static scheme is the default. Elements flow down the page from left to right and top to bottom,
unless you use the
float property to change things up. The relative scheme positions the element
relative to the element that precedes it. You can alter the page flow to a certain degree, but the
elements will still be interdependent. The
absolute and fixed schemes enable you to position elements
in any location you want on the page. The
fixed scheme is not well supported, so if you want to control
where items appear yourself you should use
absolute.
Once you've picked a positioning scheme, you can set the position for elements. There are four
positioning properties:
top, left, bottom, and right. The values for these properties are specified as the
distance of the named side from the side of the enclosing block. Here's an example:
.thing {
position: relative;
left: 50px;
top: 50px;
}
In this case, elements in the thing class will be shifted 50 pixels down and 50 pixels to the left from the
element that precede them in the page layout. If I changed
position to absolute, the element would
appear 50 pixels from the top-left corner of the page's body.
Generally, when you're positioning elements, you pick a corner and specify where the element should be
located. In other words, there's never a need to set more than two of the four positioning properties. If
you set more than two, you could run into problems with how the browser renders the page because
you're specifying not only where the element should be located but also the size of the element. It's
much safer to use the sizing properties to size your elements and then specify the position of one corner
of your element if you want to indicate where it should go on the page.
Relative Positioning
Let's look at a page that uses relative positioning. This page will illustrate both how relative positioning
works and some of the problems with it. A screenshot of the page listed in the following code appears in
Figure 9.15.
Input
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
file:///G|/1/0672328860/ch09lev1sec5.html (1 von 9) [19.12.2006 13:49:11]
CSS Positioning
.two {
border: 3px solid blue;
padding: 10px;
margin: 10px;
background-color: #ffc;
position: relative;
top: -46px;
left: 50px;
width: 33%; }
</style>
</head>
<body>
<p class="one">
The absence of romance in my history will, I fear, detract somewhat
from its interest; but if it be judged useful by those inquirers who
desire an exact knowledge of the past as an aid to the interpretation
of the future, which in the course of human things must resemble if
it does not reflect it, I shall be content.
</p>
<p class="two">
The absence of romance in my history will, I fear, detract somewhat
from its interest; but if it be judged useful by those inquirers who
desire an exact knowledge of the past as an aid to the interpretation
of the future, which in the course of human things must resemble if
it does not reflect it, I shall be content. In fine, I have written
my work, not as an essay which is to win the applause of the moment,
but as a possession for all time.
</p>
<p class="three">
The absence of romance in my history will, I fear, detract somewhat
from its interest; but if it be judged useful by those inquirers who
desire an exact knowledge of the past as an aid to the interpretation
of the future, which in the course of human things must resemble if
it does not reflect it, I shall be content. In fine, I have written
my work, not as an essay which is to win the applause of the moment,
but as a possession for all time.
</p>
</body>
</html>
Output
Figure 9.15. A page that uses relative positioning for an element.
[View full size image]
file:///G|/1/0672328860/ch09lev1sec5.html (2 von 9) [19.12.2006 13:49:11]
CSS Positioning
You can spot the problem right away on this pagethe relatively positioned element overlaps the
paragraph above it. I used a negative value for the
top property to move the element up 50 pixels, and
also moved it to the left 50 pixels. The hole where the content would normally be positioned if I were
using static positioning remains exactly the same as it would had I not moved the element, thus
creating white space before the third paragraph. However, due to the positioning, the paragraph has
been moved up so that it overlaps the one above it.
Another point to note is that boxes are normally transparent. I added a background color to the
relatively positioned box to more clearly illustrate how my page works. If I remove the
background-color
property from class
two, the page looks like the one in Figure 9.16.
Figure 9.16. Transparency of overlapping elements.
[View full size image]
Needless to say, in this example, transparency is probably not the effect I'm looking for. However,
file:///G|/1/0672328860/ch09lev1sec5.html (3 von 9) [19.12.2006 13:49:11]
CSS Positioning
taking advantage of this transparency can be a useful effect when you create text blocks that partially
overlap images or other nontext boxes.
Absolute Positioning
Now let's look at absolute positioning. The source code for the page shown in Figure 9.17 contains four
absolutely positioned elements.
Input
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
#topleft {
position: absolute;
top: 0px;
left: 0px;
}
#topright {
position: absolute;
top: 0px;
right: 0px;
}
#bottomleft {
position: absolute;
bottom: 0px;
left: 0px;
}
#bottomright {
position: absolute;
bottom: 0px;
right: 0px;
}
.box {
border: 3px solid red;
background-color: #ccf;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box" id="topleft">
Top left corner.
</div>
<div class="box" id="topright">
Top right corner.
</div>
<div class="box" id="bottomleft">
Bottom left corner.
</div>
file:///G|/1/0672328860/ch09lev1sec5.html (4 von 9) [19.12.2006 13:49:11]
CSS Positioning
<div class="box" id="bottomright">
Bottom right corner.
</div>
<p class="one">
The absence of romance in my history will, I fear, detract somewhat
from its interest; but if it be judged useful by those inquirers who
desire an exact knowledge of the past as an aid to the interpretation
of the future, which in the course of human things must resemble if
it does not reflect it, I shall be content.
</p>
<p class="two">
The absence of romance in my history will, I fear, detract somewhat
from its interest; but if it be judged useful by those inquirers who
desire an exact knowledge of the past as an aid to the interpretation
of the future, which in the course of human things must resemble if
it does not reflect it, I shall be content. In fine, I have written
my work, not as an essay which is to win the applause of the moment,
but as a possession for all time.
</p>
</body>
</html>
Output
Figure 9.17. A page that uses absolute positioning.
[View full size image]
Aside from the fact that there are now four absolutely positioned <div>s on the page exactly where I
indicated they should be placed, a couple of other things should stand out here. The first item to notice
is that when you absolutely position elements, there's no placeholder for them in the normal flow of the
page. My four
<div>s are defined right at the top, and yet the first paragraph of the text starts at the
beginning of the page body. Unlike relative positioning, absolute positioning completely removes an
element from the regular page layout. The second interesting fact is that absolutely positioned elements
file:///G|/1/0672328860/ch09lev1sec5.html (5 von 9) [19.12.2006 13:49:11]
CSS Positioning
overlap the existing content without any regard for it. If I wanted the text in the paragraphs to flow
around the positioned elements, I would have had to use
float rather than position.
Not only can I use any unit of measurement when positioning elements, I can also use negative
numbers if I choose. You already saw how I applied a negative value to the top of the relatively
positioned element to move it up some; I can do the same thing with these absolutely positioned
elements. The result of changing the rule for the
topleft class in the earlier example to
Input
#topleft {
position: absolute;
top: -30px;
left: -30px;
}
is that it actually pulls the element partially off of the page, where it is inaccessible even using the scroll
bars, as shown in
Figure 9.18.
Output
Figure 9.18. Use of negative absolute positioning.
[View full size image]
Controlling Stacking
If overlap isn't the effect you're looking for, relative and absolute positioning probably aren't for you.
However, there is a way to control overlap as well. The
z-index property defines stacking order for a
page. By default, elements that appear in the same layer of a document are stacked sequentially. In
other words, an element that appears after another will generally be stacked above it.
By assigning
z-index values to elements, though, you can put elements in specific stacking layers. If all
file:///G|/1/0672328860/ch09lev1sec5.html (6 von 9) [19.12.2006 13:49:11]
CSS Positioning
elements appear in stacking layer 0 by default, any element in stacking layer 1 (z-index: 1) will appear
above all elements in layer 0. The catch here is that
z-index can be applied only to elements that are
placed using absolute or relative positioning. Elements that are placed using static positioning always
appear below relatively or absolutely positioned elements. The stacking layers below 0 are considered
beneath the body element, and so they don't show up at all.
Tip
If you want to have an element positioned as though it were part of the static positioning
scheme but you want to control its stacking layer, assign it the relative positioning scheme
and don't specify a position. It will appear on the page normally but you will be able to
apply a
z-index to it.
Let's look at another page. This one contains two paragraphs, both part of the same (default) stacking
layer. As you can see in
Figure 9.19, the second overlaps the first.
Input
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
.one {
position: relative;
width: 50%;
padding: 15px;
background-color: #ffc;
}
.two {
position: absolute;
top: 15%;
left: 15%;
padding: 15px;
width: 50%;
background-color: #060;
color: #fff;
}
</style>
</head>
<body>
<p class="one">
The absence of romance in my history will, I fear, detract somewhat
from its interest; but if it be judged useful by those inquirers who
desire an exact knowledge of the past as an aid to the interpretation
of the future, which in the course of human things must resemble if
it does not reflect it, I shall be content.
</p>
<p class="two">
The absence of romance in my history will, I fear, detract somewhat
from its interest; but if it be judged useful by those inquirers who
desire an exact knowledge of the past as an aid to the interpretation
of the future, which in the course of human things must resemble if
it does not reflect it, I shall be content. In fine, I have written
file:///G|/1/0672328860/ch09lev1sec5.html (7 von 9) [19.12.2006 13:49:11]
CSS Positioning
my work, not as an essay which is to win the applause of the moment,
but as a possession for all time.
</p>
</body>
</html>
Output
Figure 9.19. Two normally stacked elements.
So, how do I cause the first element to overlap the second? Because I've assigned the first element the
relative positioning scheme (even though I haven't positioned it), I can assign it a
z-index of 1 (or
higher) to move it into a stacking layer above the second paragraph. The new style sheet for the page,
which appears in
Figure 9.20, is as follows:
Input
.one {
position: relative;
z-index: 1;
width: 50%;
padding: 15px;
background-color: #ffc;
}
file:///G|/1/0672328860/ch09lev1sec5.html (8 von 9) [19.12.2006 13:49:11]
CSS Positioning
.two {
position: absolute;
top: 15%;
left: 15%;
padding: 15px;
width: 50%;
background-color: #060;
color: #fff;
}
Output
Figure 9.20. A page that uses z-index to control positioning.
Needless to say, using a combination of absolute and relative positioning, you can create very complex
pages with many stacked layers.
file:///G|/1/0672328860/ch09lev1sec5.html (9 von 9) [19.12.2006 13:49:11]
