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.
Search WWH ::

Custom Search