CSS Positioning Workshop

For this workshop we revised over HTML and CSS positioning commands and were asked to create a simple wireframe for a webpage using CSS. To do this we had to get familiar with the different position properties and understand which property to use when trying to achieve a specific command.

Static:

Screen Shot 2015-02-25 at 17.41.39

A static position is the default value for any element of a webpage, if an element is positioned static it is considered not positioned.

Relative:

Screen Shot 2015-02-25 at 17.49.56

Relative behaves the same as static but can be changed if additional properties are added, these properties are top,bottom,left and right and can be adjusted to move away from the elements original position.

Fixed:

Screen Shot 2015-02-25 at 18.11.00

When an element is fixed it means it stays in a fixed position in the webpage even if the user scrolls the page, as with relative additional properties can be used such as top,bottom. left and right

Absolute:

Screen Shot 2015-02-25 at 18.16.24

Absolute is considered the trickiest position value as it only behaves in relation to the nearest positioned ancestor instead of relative to the viewport. If an element is positioned absolutely but has to positioned ancestors then it uses the body of the webpage.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s