This chapter is from the book
This chapter is from the book
This chapter is from the book
Relative positioning
With position: relative; you can offset the affected element’s position from its normal position in the document flow by the amount you specify (Figure 21.2). The movement values you set (using top, bottom, left, right) offset the box relative to the current position of the element you are moving, although they might work in the opposite way to what you’d expect, as these properties refer to the side of the element you are pushing against to move it, not the direction of movement. So, to:
- move the element right, you set a positive value for the left property (or a negative value for the right property).
- move the element left, you set a positive value for the right property (or a negative value for the left property).
- move the element up, you set a positive value for the bottom property (or a negative value for the top property).
- move the element down, you set a positive value for the top property (or a negative value for the bottom property).
)
Figure 21.2: A relatively positioned element is offset from its original position in the document flow by the values you specify.
This does seem a bit counterintuitive to begin with, but you soon get used to it.
Bear in mind that the element’s location in the document structure remains the same—moving its position is purely a visual effect.
So what is this useful for? Well, you will find it very useful if you want to offset the position of certain elements for the purposes of the design (while retaining the space that the element would normally occupy and preserving the document flow), as I’ve done with the images and heading in relative_positioning1.html, which you can download from http://interactwithwebstandards.com. It is a simple single column with paragraphs and images, but I have used relative positioning to shift elements to the left, creating an interesting “out of the box” type effect, which wouldn’t be achievable by manipulating padding and margins. The relevant rules look like so:
h1 {
font-family: Futura, Helvetica, Arial, sans-serif;
margin-top: 0;
position: relative;
right: 150px;
width: 26em;
}
img {
border: 2px solid black;
position: relative;
right: 4em;
}
Relative positioning is used to shift the right hand edge of the images and heading over to the left, resulting in the effect seen in Figure 21.3.
)
Figure 21.3: Relative positioning is being used to move the images and heading over to the left for a nice “out of the box” effect.