Coding for designers part 7

Last time we looked at two important concepts in CSS layout. Display type and the box model.

We’ll now use the position property to move elements around the page in order it create more engaging layouts.

Position

There are four main values that can be applied to the position property: static, relative, absolute and fixed.

Once you have declared a position property four more properties come into play. They are top, bottom, left and right. By declaring a length value in one of these you can nudge the element around the page. It might sound counter intuitive but if you declare a value for top your element will be pushed down from the top, if you declare a value for left it will be push to the right from the left and so on.

For instance this CSS rule would push all images on the page down 50px from their default position:

img {
	position: relative:
	top: 50px;
}

In the following four examples I’ll try each of the four position property values on an image sitting inside a p tag and apply top: 50px; and left: 50px; to see what effect this has.

Static

See the Pen Position Static example by chris-creditdesign (@chris-creditdesign) on CodePen.

Here I’ve set the image’s position to be static. Static is the default position for all elements so declaring it actually has no effect. Top and left also have no effect here because static elements cannot be nudged in this way.

The net result in the image rests exactly where it would do normally.

Relative

See the Pen Position Relative example by chris-creditdesign (@chris-creditdesign) on CodePen.

Now things are getting a bit more interesting. Once a relative position has been declared the top and left properties will nudge the element from its default position. You can see above that the image has moved 50px down and 50px to the right from its default position within the paragraph.

Notice also that the paragraph itself is unchanged. It still takes up the full height as if the image had not moved and there is the same space remaining between the words.

Absolute

See the Pen Position Absolute example by chris-creditdesign (@chris-creditdesign) on CodePen.

Instead of nudging an absolutely positioned element from its default position we can nudge it based on the position of a tag that it is nested inside - as long as the parent tag’s position property is set to something other than static.

Phew! It sounds complicated but absolute positioning is really very useful once you get your head around it. Imagine you had a div containing a map image and you wanted to add some pointers to that map. By absolutely positioning the pointers you could specify how far they should be from the top and left edges of the map to make sure they are placed at exactly the right spot.

Here I’ve set the p tag that contains the image to be position: relative;. This doesn’t effect the position of the paragraph but it does mean that we are now able to nudge the image 50px down and 50px to the right from the paragraph’s top left corner.

Notice now that the paragraph behaves as if it no longer contains the image. It has shrunk in height and the space in the text has closed up as if the image was not there.

Fixed

See the Pen Position Fixed example by chris-creditdesign (@chris-creditdesign) on CodePen.

An element with a fixed position behaves in a very similar way to an absolutely positioned element except that instead of being placed relative to a parent tag it is positioned relative to the browser viewport. The viewport is the size of browser window that is displaying the page, not the page itself.

The element will now act as if it is part of the browser rather than part of the page, for instance if you scroll further down the page the fixed element will stay exactly where it is.

I’ve added some extra junk text to the example above it illustrate this. Go ahead, give it a scroll.

Next time around we’ll use all our new found powers to jump in an start creating some CSS layouts.