HTML and CSS Reference
In-Depth Information
The outer
<div>
contains two images. The styles in absolute_page.html use an attribute selector to position
destination.png like this:
img[src$="destination.png"] {
position: absolute;
left: 70px;
top: 100px;
}
This sets the image's
position
property to
absolute
, removing it from the normal flow of the document.
The
left
and
top
properties set the image's offsets to
70px
and
100px,
respectively. Although the image is nested
inside the outer
<div>
, neither the
<div>
nor any of its ancestors is positioned. Consequently, the page is the
containing block for destination.png. The left edge of the image is
70px
from the left side of the page, and the top
of the image is
100px
from the top of the page.
The offsets were designed for a browser window that's
800px
wide. At that size, destination.png is correctly
superimposed over the top-left corner of the larger image, as shown in Figure
11-7
.
Figure 11-7.
This is how the two images are meant to be superimposed
However, what you see in the browser depends entirely on how wide the browser window is when you view
the page. If the browser window is wider than
800px
, destination.png appears to move (see Figure
11-8
). In fact,
the image is in exactly the same position
100px
from the top of the page and
70px
from the left. However, the
wider browser viewport results in the nonpositioned elements being recentered.
