CSS tutorial and reference - advanced
(Some of the examples will show up better as a web page — but not so well in this printout.)

div.image {
  float: left;
  width: 25%;
  margin-left: 40px;
}

<div class="image">
Some words to fill up the paragraph so
we have something to see
</div>
<div class="image">
In some browsers, the tops of the paragraphs
won't line up.
</div>

static: The default position.
(That means, the position the box will have, if you don't define any other position.)
The box is a normal box,
laid out according to the normal flow.
The 'left' and 'top' properties do not apply.

div {
  position: static;
}

<img src="images/bullit1.gif" 
   alt="bullet" />
<div>
This div is static.
</div>

fixed: The box is fixed with respect to some outside reference.
In the case of continuous (ie., scrolling) media (a web browser),
the box is fixed with respect to the viewport.
It doesn't move when scrolled.
(In the case of paged media, like print,
the box is fixed with respect to the page.)

<p style="position: fixed; top:  30px; right: 30px; 
    padding: .5ex .5em .5ex .5em; 
    color: #cc0000; background-color: #ffffcc;" />
Practice makes perfect.
</p>

relative: The box is offset relative to its normal position,
(i.e., where it would normally be in the flow).
It is moved "in relation to where it would normally be".
or
"It is offset from itself."
It leaves a space there, where it would have been.
It uses the 'left', 'right', 'top', and 'bottom' properties.

div {
  position: relative;
  left: 40px;
}

<img src="images/bullit1.gif" 
   alt="bullet" />
<div>
This div is shifted 40 pixels to the left.
</div>

absolute: The box is offset with respect to it's root element (which is usually its containing block).
The space where it would have been, closes up:
It is "pulled out of the normal flow".
The root element has to be set position: relative for this to work.
The box's position (and possibly size) is specified with
the 'left', 'right', 'top', and 'bottom' properties.

See next item for example:

The distance of a box's top|left|bottom|right edge
from the top|left|bottom|right edge
of its containing block.
Used with positioned elements.

div {
  width:  100px;
  height: 100px;
  border: 1px dashed #ccffcc;
}
img {
  position: absolute;
  top:  20px;
  left: 50px;
}

<div>
<img src="images/bullit1.gif" alt="bullet" />
</div>

p.seeit {
  visibility: visible;
}
p.noseeit {
  visibility: hidden;
}

<p class="seeit">
This paragraph is visible.
</p>
<p class="noseeit">
This paragraph is hidden!
</p>

auto: The stack level of the generated box in the
current stacking context is the same as its parent's box.
number: The stack level of the generated box in the
current stacking context. '0' is at the "bottom"
(farthest back).

div.one {
  background-color: #cccccc;
  position: relative; 
  z-index: 2;
  left:  20px;
  width: 200px;
  height: 150px;
}
div.two {
  background-color: #cc0000;
  position: relative; 
  z-index: 1;
  left:    35px;
  bottom: 250px;
  width: 200px;
  height: 150px;
}
img {
  position: relative; 
  z-index: 3;
  left:    60px;
  bottom: 130px;
  width: 200px;
  height: 150px;
}

<div class="one">&nbsp;</div>
<img src="images/kalm-valley.jpg" 
   alt="kalmiopsis" />
<div class="two">&nbsp;</div>

div {
  width: 50px; 
  height: 80px; 
  border: 1px solid #cc0000;
}

<div>
<img src="webwalker-logo.gif" alt="logo" />
</div>

<div style="overflow: hidden;">
<img src="webwalker-logo.gif" alt="logo" />
</div>

* {
  font-family: times, serif;
  border: 4px groove #cc6633;
}

<p>
We can have a style for all elements with the *.
</p>
<ul>
<li>
All elements on the page will have the same style.
</li>
</ul>

div.main p {
  line-height: 1.5em;
}

<div class="main">
<p>
All paragraphs inside a div of class "main" will have a line-height
of 1.5 ex (about 150%).
</p>
</div>
<p>
All paragraphs not inside this div will have their default line-height.
</p>

div.main>p {
  line-height: 1.5em;
}

<div class="main">
<p>
All paragraphs inside a div of class "main" will have a line-height
of 1.5 ex (about 150%).
</p>
</div>
<p>
All paragraphs not inside this div will have their default line-height.
</p>

p+ul {
  margin-top: 0;
}

<p>
An unordered list usually has some margin at the top.
</p>
<ul>
<li>
Often when a list follows a paragraph, we would like to 
have less or no margin. (The paragraph will have some
margin at the bottom, which is usually enough.)
</li>
</ul>

table[border] {
  background-color: #66ff66;
}

<table border="1">
<tr>
<td>
This table has a border, so it has a green background.
</td>
</tr>
</table>
<br /> 
<table>
<tr>
<td>
This table has no border, so it has no background color.
</td>
</tr>
</table>
<br /> 
<table border="6">
<tr>
<td>
This table has a border, so it also has a green background.
</td>
</tr>
</table>

table[border="3"] {
  background-color: #ffccff;
}

<table border="6">
<tr>
<td>
This table has a border of 6, so it has no background color.
</td>
</tr>
</table>
<br /> 
<table border="3">
<tr>
<td>
This table has a border of 3, so it has a background color.
</td>
</tr>
</table>
<br /> 
<table>
<tr>
<td>
This table has no border, so it has no background color.
</td>
</tr>
</table>

p[class~="example"] {
  background-color: #ffccff;
}

<p class="example  code display">
This paragraph has several classes &ndash; 
one of them is "example", so it has a background color.
</p>
<p class="code display">
This paragraph has several classes, 
but none of them is "example", so no background color.
</p>

p[lang|="en"] {
  background-color: #ffccff;
}

<p lang="en-US">
This paragraph has language set that starts with "en",
so has a background color.
</p>
<p lang="de">
This paragraph has language set to "de", 
so no background color.
</p>