- Positioning basics
- Relative positionin
- Absolute positioning
- Making positioning occur relative to elements other than <body>
- Fixed positioning
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Making positioning occur relative to elements other than <body>
As mentioned earlier, absolute positioning occurs relative to the nearest positioned ancestor element, which is usually the <body> element but will change if an element further down the hierarchy has positioning set on it. This means that—rather usefully—you can absolutely position any element inside its parent by setting position: absolute; on that element and another type of positioning on its parent.
This is useful—some would say essential—for fine-tuning layouts of various website features, especially intricate layouts of, for example, content boxes or navigation menu items.
Let’s look at a basic example to show you what I mean. We’ll return to the first example in the chapter and put inset captions on top of the images (check out absolute_positioning2.html in the code download at http://interactwithwebstandards.com for the finished example from this section). First of all I’ll add the caption text in paragraphs below the images, as shown in Figure 21.8.
)
Figure 21.8: Adding captions below our images.
We obviously need to position these somehow, but relative positioning is no good for the captions—we don’t want big gaps left beneath our images where the captions used to sit. Absolute positioning is what we need here!
But this creates a complication: by default, absolutely positioned elements are positioned relative to the <body> element. Because the images and captions are at different positions inside the <body>, I would have to set different vertical positions for all the captions, and give them all different ids to apply these with. This doesn’t sound so terrible for two images, but think of the scalability—what if our site got popular, and we ended up with thousands of images and captions, all positioned in the same way?
To solve this problem I will first add an identical wrapper <div> around each image/caption pair:
<div class="image_wrapper"> <img src="weird_sign.jpg" alt="A very strange sign we saw on holiday in Australia, of a cow being electrocuted as it runs a car over, or something." width="240" height="205"> <p class="caption">Weird cow sign</p> </div>
Then I will take the relative positioning off the images, and instead relatively position the image wrappers:
.image_wrapper {
position: relative;
right: 4em;
}
Lastly I’ll style the captions. I’ve set the text size a bit smaller than the standard paragraph font, and given it a border and background. Then we get to the interesting part: absolute positioning is used to position the captions right in the bottom-right hand corner of the images.
.caption {
font-size: 80%;
border: 2px solid black;
background-color: white;
width: 110px;
height: 17px;
position: absolute;
top: 174px;
left: 130px;
}
The captions are now being positioned relative to the image wrappers, not the <body>, because relative positioning has been put on the #image_wrapper <div>s, which are the parents of the captions. Since the images are all the same size, I can now move all the captions the same distance horizontally and vertically to get the desired effect, which requires fewer ids, and fewer calculations. This gives us the final result shown in Figure 21.9.
)
Figure 21.9: The final result.