top, right, bottom, left Values: length measurement | percentage | auto | inherit Default: auto Applies to: Positioned elements where position value is relative, absolute, or fixed In
Trang 1The distinguishing characteristic of fixed positioning is that the element stays in one position in the window even when the document scrolls Fixed elements are removed from the document flow and positioned relative to the browser window (or other viewport) rather than another element in the document
Specifying position
Once you’ve established the positioning method, the actual position is speci-fied with four offset properties
top, right, bottom, left
Values: length measurement | percentage | auto | inherit
Default: auto
Applies to: Positioned elements (where position value is relative, absolute,
or fixed)
Inherits: no
The values provided for each of the offset properties defines the distance the element should be moved away from that respective edge For example, the
value of top defines the distance the top outer edge of the positioned ele-ment should be offset from the top edge of the browser or other containing element A positive value for top results in the element box moving down by
that amount Similarly, a positive value for left would move the positioned element to the right (toward the center of the containing block) by that amount
Further explanations and examples of the offset properties will be provided
in the discussions of each postioning method We’ll start our exploration of positioning with the fairly straightforward relative method
Relative Positioning
As mentioned previously, relative positioning moves an element relative to its original spot in the flow The space it would have occupied is preserved and continues to influence the layout of surrounding content This is easier to understand with a simple example
Here I’ve positioned an inline em element (a background color makes its boundaries apparent) First, I used the position property to set the method
to relative, then I used the top offset property to move the element 30 pixels down from its initial position, and the left property to move it 60 pixels to the right Remember, offset property values move the element away from the specified edge, so if you want something to move to the right, as I did here, you use the left offset property The results are shown in Figure 15-10
Note
Negative values are acceptable and move
the element in the opposite directions For
example, a negative value for top would
have the effect of moving the element up.
Note
Negative values are acceptable and move
the element in the opposite directions For
example, a negative value for top would
have the effect of moving the element up.
Trang 2em {
position: relative;
top: 30px;
left: 60px;
background-color: fuchsia;
}
30px 60px
Figure 15-10 When an element is positioned with the relative method, the space it
would have occupied is preserved.
I want to point out a few things that are happening here
The original space in the document flow is preserved.
You can see that there is a blank space where the emphasized text would
have been if the element had not been positioned The surrounding
con-tent is layed out as though the element were still there, therefore we say
that the element still “influences” the surrounding content
Overlap happens.
Because this is a positioned element, it can potentially overlap other
ele-ments, as shown in Figure 15-10
The empty space left behind by relatively positioned objects can be a little
awk-ward, so this method is not used as often as floating and absolute positioning
However, relative postioning is commonly used to create a positioning context
for an absolutely positioned element, as I’ll explain in the next section
Absolute Positioning
Absolute positioning works a bit differently and is actually a more flexible
meth-od for achieving page layouts than relative positioning Now that you’ve seen how
relative positioning works, let’s take the same example as shown in Figure 15-l0,
only this time we’ll change the value of the position property to absolute
em {
position: absolute;
top: 30px;
left: 60px;
background-color: fuchsia;
}
Trang 330px 60px
Figure 15-11 When an element is absolutely positioned, it is removed from the flow and the space is closed up.
As you can see in Figure 15-11, the space once occupied by the em element
is now closed up, as is the case for all absolutely positioned elements In its new position, the element box overlaps the surrounding content In the end, absolutely positioned elements have no influence whatsoever on the layout
of surrounding elements
The most significant difference here, however, is the location of the floated element This time, the offset values position the em element 30 pixels down and 60 pixels from the top-left corner of the browser window
But, wait Before you start thinking that absolutely positioned elements are always placed relative to the browser window, I’m afraid that there’s more to
it than that
What actually happens in absolute positioning is that the element is posi-tioned relative to its nearest containing block It just so happens that the near-est containing block in Figure 15-11 is the root (html) element (also known
as the initial containing block), so the offset values position the em element relative to the whole browser window area
Getting a handle on the containing block concept is the first step to taking
on absolute positioning
Containing blocks
The CSS2.1 Recommendation states, “The position and size of an element’s box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.” It is critical to have an awareness of the containing block of the element you want to position
CSS2.1 lays out a number of intricate rules for determining the containing
Trang 4If the positioned element is not contained within another positoned
ele-ment, then it will be placed relative to the initial containing block (created
by the html element)
But if the element has an ancestor (i.e is contained within an element)
that has its position set to relative, absolute, or fixed, the element will
be positioned relative to the edges of that element instead.
Figure 15-11 is an example of the first case: the p element that contains the
absolutely positioned em element is not positioned itself, and there are no
other positioned elements higher in the hierarchy, therefore the em element is
positioned relative to the initial containing block, which is equivalent to the
browser window area
Let’s deliberately turn the p element into a containing block and see what
happens All we have to do is apply the position property to it; we don’t have
to actually move it The most common way to make an element into a
con-taining block is to set the position to relative, but don’t move it with offset
values (By the way, this is what I was talking about earlier when I said that
relative positioning is most often used to create a context for an absolutely
positioned element.)
We’ll keep the style rule for the em element the same, but we’ll add a
posi-tion property to the p element, thus making it the containing block for the
positioned em element Figure 15-12 shows the results
p {
position: relative;
padding: 15px;
background-color: #DBFDBA;
border: 2px solid #6C4788;
}
30px 60px
Figure 15-12. The positioned p element acts as a containing block for the em element.
•
•
Note
Some browsers base the initial containing block on the body element The net result
is the same in that it fills the browser window.
Note
Some browsers base the initial containing block on the body element The net result
is the same in that it fills the browser window.
Or, to put it another way
The containing block for an absolutely positioned element is the nearest positioned ancestor element (that is, any element with
a value for position other than
static)
If there is no containing block present (in other words, if the positioned element is not contained within another positioned element), then the initial containing block (created by the html element) will be used instead.
Or, to put it another way
The containing block for an absolutely positioned element is the nearest positioned ancestor element (that is, any element with
a value for position other than
static)
If there is no containing block present (in other words, if the positioned element is not contained within another positioned element), then the initial containing block (created by the html element) will be used instead.
Trang 5You can see that the em element is now positioned 30 pixels down and 60 pixels from the top-left corner of the paragraph box, not the browser window Notice also that it is positioned relative to the padding edge of the paragraph
(just inside the border), not the content area edge This is the normal behavior when block elements are used as containing blocks (see note)
I’m going to poke around at this some more to reveal additional aspects of absolutely positioned objects This time, I’ve added width and margin proper-ties to the positioned em element (Figure 15-13)
em {
width: 200px;
margin: 25px;
position: absolute;
top: 30px;
left: 60px;
background-color: fuchsia;
}
30px
Figure 15-13. Adding a width and margins to the positioned element.
Here we can see that:
The offset values apply to the outer edges of the element box (from mar-gin edge to marmar-gin edge), and
Absolutely positioned elements always behave as block-level elements For example, the margins on all sides are maintained even though this is
an inline element It also permits a width to be set for the element
•
•
Note
When inline elements are used as
con-taining blocks (and they can be), the
positioned element is placed relative to
the content area edge, not the padding
edge.
Note
When inline elements are used as
con-taining blocks (and they can be), the
positioned element is placed relative to
the content area edge, not the padding
edge.
Trang 6It is important to keep in mind that once you’ve positioned an element, it
becomes the new containing block for all the elements it contains Consider
this example in which a div named “content” is positioned in the top-left
corner of the page When a positioned list item within that div is given offset
values that place it in the top-right corner, it appears in the top-right corner of
the contents div, not the entire page (Figure 15-14) That is because once the
div is positioned, it acts as the containing block for the li element
The markup:
<div id="preface">
<h1>Old-Fashioned Fairy Tales</h1>
<p>As the title </p>
<p>Except for the use </p>
<p>They have appeared </p>
<p>First, </p>
</div>
<div id="content">
<h2>Contents</h2>
<ul>
<li>The Nix in Mischief</li>
<li id="special">The Ogre Courting</li>
<li>Murdoch’s Wrath</li>
<li>The Little Darner</li>
<li>The Magic Jar</li>
</ul>
</div>
The style sheet:
body {
background-color: #F9FEB0;
}
div#content {
width: 200px;
position: absolute;
top: 0; /* positioned in the top-left corner */
left: 0;
background-color: #AFD479;
padding: 10px;
}
li#special {
position: absolute;
top: 0; /* positioned in the top-right corner */
right: 0;
background-color: fuchsia;
}
div#preface {
margin-left: 225px; /* makes room for the contents box */
}
Trang 7The li element is positioned in the top-right corner of the
“contents” div
The positioned “contents”
div becomes the containing block for the positioned li element and creates a new positioning context.
Figure 15-14 Positioned elements become the containing block for the elements they contain In this example, the list item is positioned relative to the containing div element, not the whole page.
Specifying Position
Now that you have a better feel for the containing block concept, let’s take some time to get better acquainted with the offset properties So far, we’ve only seen an element moved a few pixels down and to the right, but that’s not all you can do, of course
Pixel measurements
As mentioned previously, positive offset values push the positioned element box away from the specified edge and toward the center of the containing
block If there is no value provided for an edge, it is set to auto, and the browser adds enough space to make the layout work In this example, I’ve used pixel length for all four offset properties to place the positioned element
at a particular spot in its containing element (Figure 15-15)
div#a {
position: relative; /* creates the containing block */
height: 120px;
width: 300px;
border: 1px solid;
background-color: #CCC;
} div#b {
position: absolute;
top: 20px;
right: 30px;
bottom: 40px;
left: 50px;
border: 1px solid;
background-color: teal;
Trang 8div.a ( width: 300px; height: 120px )
(calculated at 220 pixels wide x 60 pixels high)
bottom: 40px top: 20px
Figure 15-15 Setting offset values for all four sides of a positioned element.
Notice that by setting offsets on all four sides, I have indirectly set the
dimen-sions of the positioned div#b (it fills the 220 × 60 pixel space that is left over
within the containing block after the offset values are applied) If I had also
specified a width and other box properties for div#b, there is the potential for
conflicts if the total of the values for the positioned box and its offsets do not
match the available space within the containing block
The CSS specification provides a daunting set of rules for handling conflicts,
but the upshot is that you should just be careful not to over-specify box
properties and offsets In general, a width (plus optional padding, border, and
margin) and one or two offset properties are all that are necessary to achieve
the layout you’re looking for Let the browser take care of the remaining
cal-culations
Percentage values
You can also specify positions with percentage values In the first example
in Figure 15-16, the image is positioned half-way down the left edge of the
containing block In the second example on the right, the img element is
positioned so that it always appears in the bottom right corner of the
con-taining block
img#A {
position: absolute;
top: 50%;
left: 0%; /* the % symbol could be omitted for a 0 value */
}
img#B {
position: absolute;
bottom: 0%; /* the % symbol could be omitted for a 0 value */
right: 0%; /* the % symbol could be omitted for a 0 value */
}
WARNING
Be careful when positioning elements at the bottom of the initial containing block (the html element) Although you may expect it to be positioned at the bottom
of the whole page, browsers actually place the element in the bottom corner
of the browser window Results may be unpredictable If you want something positioned in a bottom corner of your page, put it in a containing block element
at the end of the document source, and
go from there
WARNING
Be careful when positioning elements at the bottom of the initial containing block (the html element) Although you may expect it to be positioned at the bottom
of the whole page, browsers actually place the element in the bottom corner
of the browser window Results may be unpredictable If you want something positioned in a bottom corner of your page, put it in a containing block element
at the end of the document source, and
go from there
Trang 9top: 50%
left: 0%
bottom: 0%; right: 0%
Figure 15-16. Using percentage values to position an element in the bottom corner of the containing block.
In Exercise 15-2, we’ll have some more fun with the JenWARE home page, this time using absolute positioning
Note
If you moved the Testimonials column
to the left at the end of Exercise 15-1,
you will also need to change the margin
on the “products” div from the left to
the right side for this exercise to work
properly.
Note
If you moved the Testimonials column
to the left at the end of Exercise 15-1,
you will also need to change the margin
on the “products” div from the left to
the right side for this exercise to work
properly.
In this exercise, we’ll use absolute positioning to add an award
graphic to the site and to create a two-column layout Open
the latest version of jenville.html (or jenville_2.html if you were
using that version in the previous exercise) in a text editor to
get started.
Let’s pretend that JenWARE.com won the “Awesome Site of
the Week” award, and now we have the option of displaying
a little award banner on the home page Because it is new
content, we’ll need to add it to the markup Because it is
non-essential information, we’ll add the image in a new
div at the very end of the document, after the copyright
paragraph.
<div id="award"><img src="images/awesomesite.gif"
alt="awesome site of the week" /></div>
1.
Just because it is at the end of the document source doesn’t mean it needs to display at the bottom of the page We can use absolute positioning to place the “award“ div in the top, left corner of the browser window for all to see by adding a new rule to the style sheet that positions the div, like so:
#award { position: absolute;
top: 35px;
left: 25px;
}
Save the document and take a look (Figure 15-17) Resize the browser window very narrow and you will see that the positioned award image overlaps the header content Notice also that when you scroll the document, the image scrolls with the rest of the page Try playing around with other offset properties and values to get a feel for positioning in the browser window (or the “initial containing block” to use the correct term).
Figure 15-17 An absolutely positioned award graphic.
exercise 15-2 | Absolute positioning
Trang 10The floated testimonials box is working just fine, but for
fun, let’s see if we can do the same thing with absolute
positioning In this case, positioning within the initial
containing block is not quite feasible because we want
it to always appear under the intro
div (regardless of its size) and to stay
within the margins of the page, which
are also flexible What we need is a new
positioning context under the intro, so
let’s create a new containing block for the
positioned testimonials box.
This is going to require some changes to
the markup Wrap the testimonials and
products divs in a new div with an id of
content The structure of the document
should look like this:
<div id="content">
<div id="testimonials"> </div>
<div id="products"> </div>
</div>
<p class="copyright"> </p>
Now we can turn the “content” div into a
containing block simply by positioning it
with the “unmoved-relative-position“ trick:
#content {
position: relative;
}
We know that according to the normal
flow, the “content” div will always appear
below the preceding block-level “intro” div
element, regardless of its size What we
want to do is position the “testimonials”
div in the top, right corner of the “content”
div containing block, so we add these properties to the
#testimonials rule (delete the float property from the
previous exercise first).
#testimonials {
position: absolute;
top: 0;
right: 0;
float: right;
width: 150px;
border: 1px dashed #F26521;
padding: 1em;
padding-left: 60px;
background: #FFBC53 url(images/ex-circle-corner.
gif) no-repeat left top;
line-height: 1.2em;
}
2.
3.
4.
Save the document and look at it in the browser ( Figure 15-18 ) It should look just the same as the float exercise, but you have the satisfaction of knowing you have experience of creating a column with absolute positioning
Extra credit: Try switching the position of the columns by positioning the testimonials box on the left (Hint: you’ll need to change the margin setting on the “products” div, too).
Reality Check
Before you get too excited about the ease of creating multi-column layouts with absolute positioning, let me point out that this exercise represents a best-case scenario in which the positioned side-column is pretty much guaranteed to be shorter than the main content There is also no significant footer
to worry about If the sidebar were to grow longer with more testimonials, it would overlap any full-width footer that might
be on the page, which is not ideal Consider this a heads-up that there’s more to the story, as we’ll see in Chapter 16.
Figure 15-18 Two column format created by absolutely positioning the testimonials box.