HTML and CSS Reference
In-Depth Information
Figure 9-12
The More Information button no longer affects the flow of the page.
Note that after this change, the button touches the top of the page, which isn't the intended final position. This
happens because the position of an absolute element is relative to the next containing element with a
defined position other than
static
. Because you haven't declared any other element as being
absolute
,
relative,
or
fixed
yet, the browser treats the
<html>
element as the containing element, and as such,
the button is positioned relative to the overall page. So, as you can see,
top: 0;
makes the button touch
the top of the page.
3.
In styles.css, add the following declaration to the
.showcase
rule set:
position: relative;
4.
Save styles.css.
Now that you've made the
<div class=”showcase”>
element relative, the button contained within it is posi-
tioned relative to it, as shown in Figure 9-13. It touches the top of the showcase, but it would look better if it were
placed over to the right and vertically centered.
