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 – 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:
By adding the float property to the first <div> tag and including some margin and padding values, you get the results below:
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:
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:
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.