demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS Positioning: relative, the underappreciated

css / positioning

Estimated reading time: 2 minutes

Relative Layout Example
An example of a relative layout

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 top, left, bottom and right. As soon as position: relative is applied and any of these properties are given values, two things happen:

  1. Visually, the affected element is taken out of the “flow” of the document, while any space reserved for its original static position is retained;
  2. The element is displaced by the value given to top, left, bottom and/or 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:

<body>
<p><img src="assets/images/pericles.jpg" style="width: 231px; height: 366px; float: left; margin-right: 1em; 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>
</body>

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 top, left, bottom and/or right up and down (negative values can also be used) without any concern that the rest of your design will be affected.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.