HTML and CSS Reference
In-Depth Information
Q:
Seems like absolute positioning is
better than float because I have more control
over where the elements go. Should I prefer
absolute positioning over floating?
A:
Not really; it just depends on what you
need. If you really need an element to appear
at a precise position in the page, then absolute
positioning is the way to go. But if you want to,
say, have text flow around an image, you can't
easily do that with absolute positioning; in that
case, you'll definitely want to use float. You'll find
uses for both fairly regularly.
Q:
I was playing with a couple of absolutely
positioned <div> elements, and one always is
displayed on top of the other. Is there a way I
can change which one is on top?
A:
Yes, every positioned element has what
is called a “z-index,” which is the ordering of the
elements on an imaginary z-axis (think of it as
pointing out of your screen). You use it like this:
Q:
How do I know what z-index each
element on the page is by default?
A:
You don't really, unless you inspect the
CSS the browser computes for each element in
the page with developer tools. But most of the
time you won't care about the z-index of elements
unless you are specifically layering them or you
run into a situation like we did with the award.
Usually just setting the z-index to 1 is good
enough to make sure an element is above other
elements in the page, but if you have multiple
elements you are positioning and layering yourself,
you'll have to be a little more deliberate about the
z-index values.
Q:
Is there a maximum z-index value?
A:
Yes, but it's a very large number, and
practically, you'll never need your z-index values
to go that high.
Q:
What about negative z-index values, can
you have z-index values of, say, -1?
A:
Yes, you can! The same rules apply (that is,
the more positive and larger the value, the higher
the layer, and the closer it is to you on the screen).
Q:
Can any element have a z-index?
A:
No, only elements that have been
positioned with CSS using absolute, relative, or
fixed positioning. You'll see an example of fixed
positioning next!
#div1 {
position: absolute;
top: 30px;
left: 30px;
z-index: 0;
}
#div2 {
position: absolute;
top: 30px;
left: 30px;
z-index: 1;
}
Those rules would place the element with id “div2”
on top of the element with an id “div1”.
