CSS Position Examples

The following series of Codepen examples try to explain the use of absolute and relative position. Visit each of these, read the code, make changes in codepen, and see what happens. Next try and recreate these for yourself.

  1. Static position – This is the default position
  2. Relative position – Relative position offsets an object from where it would have appeared if it has used static position
  3. Relative position with nested objects – What happens to elements inside relatively positioned element?
  4. Absolute position – Absolute position positions an element absolutely
  5. Absolute position – Elements positioned with absolute position can be positioned from their left, top, right, or bottom edges



Video tutorials

I posted a bunch of video tutorials here: http://www.screencast.com/users/webdevils# . This is a new site with more tutorials. The last site I used was Vimeo. Their site tended to resize the videos and put more restrictions on uploads. The new site doesn’t resize or recompress the videos so the quality us much better. They also support flv, which allowed me to upload some tutorials I had in this format.

These tutorials cover various aspects of Flash from beginning to more complex stuff.

I’m going to upload the example fla files to the google code site as soon as I get a chance.