Elements flow down the page from left to right and top to bottom, relative to the element that precedes it.. Here's an example: .thing { position: relative; left: 50px; top: 50px; } I
Trang 2CSS Positioning
for, you can use the CSS positioning attributes To position elements yourself, you first have to choose a
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,
relative to the element that precedes it You can alter the page flow to a certain degree, but the
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
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">
Trang 3position: 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]
Trang 4You can spot the problem right away on this pagethe relatively positioned element overlaps the
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
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,
Trang 5Now 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>
Trang 6<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
Trang 7numbers 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
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
Trang 8elements appear in stacking layer 0 by default, any element in stacking layer 1 (z-index: 1) will appear
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
Trang 9Figure 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;
}
Trang 10.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