Input▼ CSS Example .offset { border: 3px solid blue; padding: 10px; margin: 10px; background-color: gray; position: relative; top: -46px; left: 50px; width: 33%; } The absence of
Trang 1CSS Positioning
If using floatto control how elements are laid out doesn’t provide the measure of
con-trol 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 positionproperty
There are four positioning schemes, three of which you’ll actually use The four are
sta-tic,relative,absolute, and fixed
Thestaticscheme is the default Elements flow down the page from left to right and
top to bottom, unless you use the floatproperty 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
andfixedschemes enable you to position elements in any location you want on the
page The fixedscheme is not well supported, so if you want to control where items
appear yourself you should use absolute
After 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
prop-erties 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 thingclass will be shifted 50 pixels down and 50 pixels to
the left from the elements that precede them in the page layout If I were to change
positiontoabsolute, the element would appear 50 pixels from the top-left corner of
Output
FIGURE 8.16
Two floating
ele-ments that are
aligned vertically.
Trang 2Generally, 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
ele-ment should be located but also the size of the eleele-ment It’s much safer to use the sizing
properties to size your elements and then specify the position of one corner of your
ele-ment 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 illustrates 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 8.17
Input▼
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style type=“text/css”>
.offset {
border: 3px solid blue;
padding: 10px;
margin: 10px;
background-color: gray;
position: relative;
top: -46px;
left: 50px;
width: 33%; }
</style>
</head>
<body>
<p>
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=“offset”>
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
8
Trang 3but as a possession for all time.
</p>
</body>
</html>
Output
FIGURE 8.17
A page that uses
relative positioning
for an element.
You can spot the problem right away on this page—the relatively positioned element
overlaps the paragraph above it I used a negative value for the topproperty 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 whitespace before the third
para-graph However, due to the positioning, the paragraph has been moved up so that it
over-laps the one above it
By default, the backgrounds of elements on an HTML page are transparent I added a
background color to the relatively positioned box to more clearly illustrate how my page
works If I remove the background-colorproperty from class two, the page looks like
the one in Figure 8.18
In this example, transparency is probably not the effect I’m looking for However, taking
advantage of this transparency can be a useful effect when you create text blocks that
partially overlap images or other nontext boxes
Trang 4Absolute Positioning
Now let’s look at absolute positioning The source code for the page shown in
Figure 8.19 contains four absolutely positioned elements
Input▼
<!DOCTYPE html>
<html>
<head>
<title>Absolute Positioning</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;
}
8
FIGURE 8.18
Transparency of
overlapping
elements.
Trang 5#bottomright {
position: absolute;
bottom: 0px;
right: 0px;
}
.box {
border: 3px solid red;
background-color: #blue;
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>
<div class=“box” id=“bottomright”>
Bottom right corner.
</div>
<p>
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>
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>
Trang 6Aside 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 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
overlap the existing content without any regard for it If I want the text in the paragraphs
to flow around the positioned elements, I have to use floatrather 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 scrollbars, as shown in Figure 8.20
8
Output
FIGURE 8.19
A page that
uses absolute
positioning.
Trang 7Output
FIGURE 8.20
Use of negative
absolute
positioning.
Controlling Stacking
CSS provides a way of taking control over how overlapping elements are presented The
z-indexproperty defines stacking order for a page By default, elements that appear in
the same layer of a document are stacked in source order In other words, an element that
appears after another in the HTML source for the page will generally be stacked above it
By assigning z-indexvalues to elements, however, you can put elements in specific
stacking layers If all 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-indexcan be applied only to elements that are placed using absolute or relative
positioning Elements that are placed using static positioning always appear below
rela-tively or absolutely positioned elements The stacking layers below 0 are considered
beneath the body element, and so they don’t show up at all
If you want to have an element positioned as though it were part
of the static positioning scheme but you want to control its stack-ing layer, assign it the relative positionstack-ing scheme and don’t spec-ify 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 8.21, the second overlaps the first
TIP
Trang 8Input▼
<!DOCTYPE html>
<html>
<head>
<title>Stacking Example</title>
<style type=“text/css”>
.one {
position: relative;
width: 50%;
padding: 15px;
background-color: yellow;
}
.two {
position: absolute;
top: 15%;
left: 15%;
padding: 15px;
width: 50%;
background-color: navy;
color: white;
}
</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>
</body>
</html>
8
Trang 9Output
FIGURE 8.21
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-indexof1(or higher) to move it into a stacking layer above the second
paragraph The new style sheet for the page, which appears in Figure 8.22, is as follows:
Input▼
.one {
position: relative;
z-index: 1;
width: 50%;
padding: 15px;
background-color: #ffc;
}
.two {
position: absolute;
top: 15%;
left: 15%;
padding: 15px;
width: 50%;
background-color: #060;
color: #fff;
}
Trang 10Output
FIGURE 8.22
A page that uses
z-index to
Using a combination of absolute and relative positioning, you can create very complex
pages with many stacked layers
I’ve already mentioned that you can adjust the margin, padding, and border of a page by
applying styles to the <body>tag More important, any styles that you want to apply on a
pagewide basis can be assigned to the page’s body You already know about setting the
background color for the page by using style=“background-color: black”in your
<body>tag That’s really just the beginning If you want the default font for all the text
on your page to appear in the Georgia font, you can use the following style:
body { font-family: Georgia; }
That’s a lot easier than changing the font-familyproperty for every tag that contains
text on your page A common <body>tag you often see looks something like this:
<body bgcolor=“#000000” text=“#ffffff” alink=“blue” vlink=“yellow” alink=“
purple”>
You can modify the background and text colors like this:
body { color: white;
background-color: black; }