HTML and CSS Reference
In-Depth Information
Figure 11-8.
The absolutely positioned image is no longer superimposed on the other one
To prevent the two images from going their separate ways, the outer
<div
>
also needs to be positioned, so
that it can become the containing block for destination.png. You do this by making the outer
<div
>
relatively
positioned, and not setting any offsets. It remains in its original place in the normal flow of the document, but
acts as the containing block for the absolutely positioned element.
The styles in absolute_relative.html add the
position
property to the
figure
class, and set it to
relative
.
The
left
and
top
offsets of destination.png are also adjusted to move the image in relation to its new containing
block like this:
.figure {
width: 400px;
position: relative;
}
img[src$="destination.png"] {
position: absolute;
left:
-40px
;
top:
-20px
;
}
If you test absolute_relative.html in a browser, it looks identical to Figure
11-7
. Even if you resize the browser
window or scroll the page, the two images remain locked together.
■
This technique works in all browsers including iE 6. However, iE 6 doesn't understand attribute selectors. if
you need to use this technique in iE 6, give the absolutely positioned element an iD and use an iD selector.
Note
