HTML and CSS Reference
In-Depth Information
Figure 9-11
The page title with the declarations position: relative; top: 30px;.
absolute
When you make an element
position: absolute;
, it is taken out of the document's flow and ignores the lay-
out of elements surrounding it.
Now use
position: absolute;
to finally move that pesky More Information button:
1.
In styles.css, add the following declarations to the
.showcase .button
rule set:
position: absolute;
top: 0;
2.
Save styles.css.
When you make the button absolute, it is taken out of flow (see Figure 9-12), and the main container finally
touches the bottom of the product showcase. This effect was always intended, but because the button was in
flow and sat between the two, they were separated.
