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

Custom Search