HTML and CSS Reference
In-Depth Information
Figure 9-11 The page title with the declarations position: relative; top: 30px;.
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.
Search WWH ::

Custom Search