HTML and CSS Reference
In-Depth Information
Q:
What is the position property
set to by default?
A:
The default value for positioning
is “static”. With static positioning,
the element is placed in the normal
document flow and isn't positioned by
you
—
the browser decides where it
goes. You can use the float property to
take an element out of the flow, and you
can say it should float left or right, but
the browser is still ultimately deciding
where it goes. Compare this to the
“absolute” value for the position property.
With absolute positioning, you're telling
the browser exactly where to position
elements.
Q:
Can I only position <div>s?
A:
You can absolutely position any
element, block or inline. Just remember
that when an element is absolutely
positioned, it is removed from the normal
flow of the page.
Q:
So, I can position an inline
element?
A:
Yes, you sure can. For instance,
it's common to position the <img>
element. You can position <em>s,
<span>s, and so on as well, but it isn't
common to do so.
Q:
Are there position property
values other than static and
absolute?
A:
There are actually four: static,
absolute, fixed, and relative. You've
already heard about static and absolute.
Fixed positioning places an element in
a location that is relative to the browser
window (rather than the page), so fixed
elements never move. You'll see an
example of fixed positioning in a few
pages. Relative positioning takes an
element and flows it on the page just
like normal, but then offsets it before
displaying it on the page. Relative
positioning is commonly used for more
advanced positioning and special
effects.
Q:
Do I have to specify a width for
an absolutely positioned element just
like the floated elements?
A:
No, you don't have to specify a
width for absolutely positioned elements.
But if you don't, by default, the block
element will take up the entire width
of the browser, minus any offset you
specify from the left or right. This might
be exactly what you want, or it might not.
So set the value of the width property if
you want to change this default behavior.
Q:
Do I have to use pixels for
positioning?
A:
No
—
another common way to
position elements is using percentages.
If you use percentages, the positions of
your elements may appear to change as
you change the width of your browser.
So, for example, if your browser is 800
pixels wide, and your element's left
position is set to 10%, then your element
will be 80 pixels from the left of the
browser window. But if your browser
is resized to 400 pixels wide, then the
width will be reduced to 10% of 400
pixels, or 40 pixels from the left of the
browser window.
Another common use for percentages
is in specifying widths. If you don't need
specific widths for your elements or
margins, then you can use percentages
to make both your main content area
and your sidebars flexible in size. You'll
see this done a lot in two- and three-
column layouts.
Q:
Do I have to know how to
use z-indexes to use absolute
positioning?
A:
No, z-indexes tend to be used
most often for various advanced uses
of CSS, especially when web page
scripting is involved, so they're a little
beyond the scope of this topic. But they
are a part of how absolute positioning
works, so it's good to know about
z-index (we'll come back to touch on
z-index again in just a bit).
