CSS skillshare | position: absolute;

We have had a busy, stressful few weeks at Pomegranite: big projects, tight deadlines and long days.

I decided to do a hands-on, practical tutorial to plunge everyone’s brains into the deep end and perhaps flip the reset button at the same time.

The instructions:

1. Create a folder called ‘CSS skillshare’, inside that folder create another two folders, one called ‘css’ and the other called ‘img’
2. Source a square background tile from a site like this: http://subtlepatterns.com/ name it bg_tile.jpg
3. Source a square ‘profile’ image of your favourite philosopher/celeb/yourself. Resize to 300px by 300px and name it profile.jpg

We started by creating a simple html document:

The goal – something like this:

This tutorial aims to leverage the power of the css property position: absolute;

By default elements are positioned as static. This means that the element is within the normal flow of the page and positional properties like top: and right: will have no effect on the position of the element.

In order to engage positional properties like top: bottom: etc you will need to position the element as relative. This means that the element is still within the normal flow of the document but able to be positioned within that structure.

We set our outer div as position: relative. Then the fun started. As you can see from our simple html document, we have three instances of our name. Why you may ask? To make CSS magic of course!

The three instances of our respective names will take on the property value of position: absolute; This means that the element is removed from the normal flow of the document and we can position them however we want using the positional properties of top, bottom, z-index etc. We were going for a 3-d/box-shadowy effect.

Our results: