HTML and CSS Reference
In-Depth Information
Figure 14-2
The Cool Shoes & Socks page zoomed out to show two product images in the showcase, which will be
eventually be positioned one over the other.
When you add this CSS, the Cool Shoes & Socks page appears the way it did prior to your adding the new showcase
HTML. However, the second product image now sits behind the first. When you make
.showcase ul
a
relat-
ive
position, its child elements (the list items
<li>
) can be positioned absolutely. The
z-index
of
9
makes it ap-
pear above all positioned elements, apart from the drop-down menu.
Each list item
<li>
is positioned
absolute
so that it doesn't affect the flow of the document and is placed at the
top of the showcase (making all list items added to the showcase stack on top of each other).
By using the pseudo-selector
:first-child
, you select the first list item that contains a product image. Because
this is the first product image to be displayed, it's given a
z-index
of 3 (you eventually make the product image
consist of three images). In the preceding paragraph, I said that each list item is positioned
absolute
so it doesn't
affect the document flow and the items can be stacked on top of each other. If the list items were all left like this, the
showcase would disappear because it has no contents affecting it, and its height would become 0 px. To stop this
from happening, you position the first list item only as
relative
. This way, it still affects the document's flow,
and because it's the first image in the showcase anyway, it is always at the top. Another way to work around this
situation is make the position of all list items
absolute
and then specify a height for
.showcase ul
. If you do
