First, it is important to note that simply applying
position: relative to an element changes nothing by itself: the element will continue to act in a standard, statically positioned way. However, adding
relative does give us access to the properties
right. As soon as
position: relative is applied and any of these properties are given values, two things happen:
- Visually, the affected element is taken out of the “flow” of the document, while any space reserved for its original
staticposition is retained;
- The element is displaced by the value given to
right, relative to its original static position.
It is still appropriate to apply
float to elements that are given
position: relative, so for the purposes of example, continued from the last entry, our code becomes:
<p><img src="assets/images/pericles.jpg" style="position: relative; top: 2em; right: 4em;" alt="Bust of Pericles"> Pericles was a prominent statesman, orator, and naval general of Athens during the city-states's <q>Golden Age</q>, from 448BCE until his death in 429. Pericles was a promoter of the arts (particularly plays), architecture (it was under his patronage that the Parthenon was built), and the principles of democracy, but he was also an instigator of war: Pericles is widely held to be responsible for maneuvering Athens into the disastrous Peloponnesian War with Sparta.</p>
As you can see, the image is displaced
2em down from the top of its original position, and
4em from the right. The space originally reserved for the image is kept, and the element now overlaps our text, while being partially off the side of the screen.
Perhaps the easiest way of thinking of
position: relative is that it can be used to “nudge” elements when you don't wish to affect the layout on the rest of your page. Because the original space given to the element is reserved, you can ease the values given to
right up and down (negative values can also be used) without any concern that the rest of your design will be affected.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.