Learn CSS – Part 7: Positioning

Continuing on from the previous tutorial entitled Learn CSS – Part 6: The Box Model, there are additional methods to repositioning your content while using the margin and padding properties.

Learn CSS: Positioning

Learn CSS – Part 7: The Float Property

The first example from Learn CSS – Part 2: Other Places to Put Your CSS demonstrated how the HTML Div Tag, <div>, allows you to separate large chunks of content by having as many paragraph tags, images, and videos as you want.

The Float Property will move content either to the left of the page or to the right. Below is the example from the Learn CSS – Part 2 article:

HTML Div Tag Example

By adding the float property to the first <div> tag and including some margin and padding values, you get the results below:

The Float Property

Learn CSS – Part 7: Position Property

Another method for repositioning objects on your page is the Position Property. Similar to the margin and padding properties, it can move any element left, right, top, or bottom. These properties use pixel values.

The word position and its value must be declared first before using the directional commands mentioned earlier. There are four values for position:

static – the default value

fixed – will prevent the targeted element from scrolling on the page once set

relative – can be moved based on its natural or current position on the page

absolute – is positioned based on its parent element within the document; this is usually based on the entire content area of the window browser.

Here is an example of the code and how it would look:

The Position Property Code View

Property Position Preview Part 1

The Property Position Part 2


Learn CSS – Part 7: Z-Index Property

You may have noticed in the second photo in the last section, part of the content was covered up by the light teal colored content. All elements within a page are stacked in a particular order and can be adjusted using the z-index property.

The values for the Z-Index property can be positive or negative and has a default value of 1. If the number is high, then that element will be on top. If the number is lower, it will be underneath other elements.

Taking the example from above, here is how it would look when the light teal colored content has a lover z-index value:

Z-Index Code View

The Z-Index Preview

Your Thoughts On Learning CSS

As I wrap up this article, I want get your thoughts…

What questions do you have about the box model? What creative ways would you use border property? Leave a comment on my Facebook Page.