As you can see, this tutorial page is designed quite differently from the others we've
worked through. The most obvious difference is that not all of the boxes line up in
the way they would with a table. Boxes overlap. When you resize the window, boxes
behave differently. These are some of the ways divs can behave.
Tables offer order and predictability; divs offer flexibility.
The first div (above) is coded with what is called a "relative" position. This means
that it moves around depending on how big the window is.
This div is positioned in with "absolute" position, which means that its code tells
it exactly where to appear on the page.
As you can see in the code, the upper left-hand corner is precisely at a
point 50px from the left and 340px from the top.
Even the litle down.arrow that keeps following us is in a div set as "fixed." The "fixed" property means that a div stays put. The arrow's div has been told to stay at a specific distance from the upper left-hand corner of the page.
You'll need to look at the code for this page ("view source") to get a sense
of how divs can be coded. Note that divs don't need to be controlled using styles;
you can use in-line styles to control a div. A bunch of divs coded in this
way would start out like this
But styles are better.
What is z-index?
The z-index sets what is called the stack order of the elements. That's right: divs are
3-D, and you can decide which ones are on top and which ones get covered over.
A few things to know about stacking
This website on stackability will blow your mind. Really: it's too much to handle.
More About Divs
There is a lot more that divs can do. They can be transparent. They can work well
with fixed background images. And they can interact on the page in any number of ways.
As with everything else about web composition, there are many fine
tutorials online.
Another example to examine (view that source)
is here.
Keep in mind that, as you redesign your web projects for your final portfolio,
you may be able to do things with divs that tables did now allow.