HTML and CSS Reference
In-Depth Information
Q:
The fixed coupon is cool, but
kind of annoying. Is there another
way we could position it so it doesn't
overlap content, say at the bottom of the
Beverages column?
A:
Sure. You could position the coupon at
the bottom of the Beverages column using
something called
relative
positioning. We
didn't cover this kind of positioning, but it's
similar to absolute except that the element
is left in the flow of the page (where it
would normally be), and then shifted by
the amount you specify. You can shift the
element using top, left, bottom, or right, just
like with absolutely positioned elements.
So, let's say you wanted the coupon below
the drinks in the Beverages column: you'd
move the coupon so it's nested in the
“drinks” <div> at the bottom, and then set the
position property to relative. After that, it's
up to you to put the coupon precisely where
you want it; you could position it 20px below
the drinks with top: 20px, and hanging off
the left side of the page with left: -90px (just
like we did with fixed).
Q:
So the four kinds of positioning are
static, absolute, fixed, and relative?
A:
That's right.
Static
is what you get by
default if you don't specify any positioning. It
leaves everything to flow as normal into the
page.
Absolute
takes an element completely
out of the flow of the page and allows you to
position it at an absolute position relative to
the closest positioned parent element (which
is <html> unless you specify one yourself);
fixed
positions an element at a specific, fixed
position relative to the browser window;
and
relative
positions an element relative
to its containing element by leaving it in the
normal flow, and then shifting it over by an
amount you specify.
You can also use these positioning
techniques together. For instance,
remember how we said the absolutely
positioned elements are positioned relative
to the closest positioned parent? You could
absolutely position a <div> within another
<div> by positioning the outer <div> with
relative (leaving it in the flow), and then
positioning the inner <div> with absolute,
allowing you to position it relative to the
parent <div>.
As you can see, there is a huge variety in
the ways you can position elements with
CSS positioning.
Q:
Could you position an element
completely off screen if you wanted?
A:
Yes! For instance, the coupon image is
283 pixels wide, so if you set the left position
to -283px, the coupon would disappear. It's
still there on the page; it's just not visible in
the viewport. Remember, the viewport is the
visible area of the page.
Q:
What if we want to animate
elements, like if we wanted to show the
coupon sliding into the page from the
left? Is that possible with CSS?
A:
Actually, it is, and we're glad you
asked. It's beyond the scope of this topic
to get into CSS animation, but CSS3
introduced basic animation for elements with
the transform and transition features, which
is exciting for us web geeks. It's fairly limited,
but you can do some pretty cool things with
CSS animation. If you want more than what
you can do with CSS, you'll have to use
JavaScript, and that's a whole other topic.
We give you a brief introduction to CSS
transforms and transitions in the appendix
just to whet your appetite.
