Positioning Elements in CSS (Part 2)

By: Daniel Imbellino
Updated: Feb 28, 2013

Working With Absolute, Relative, Fixed, and Inherited Positioning In CSS

Absolute positioning allows us to place an element at an exact set of coordinates from the top left of the screen. Ex: #logo {width: 150px; height: 150px; position: absolute; left: 145px; top: 140px; background-image: url("logo.png"); background-repeat: no-repeat; background-attachment: fixed; }

Its best to position elements using ID's, so that you can effectively confine each elements content that you are positioning. We used an ID named "logo" that was preceded by a pound sign, signaling the use of an ID. We then assigned size attributes to reflect the overall dimensions of our "logo" element. Using absolute positioning, we can position an element anywhere on a webpage just by specifying the distance from the top left of the screen and moving inward. Our logo element we declared in our example was placed 145px from the far left side, and 140px from the top of the page.

What we are declaring is:

Selector {position: absolute; left: 145px; top: 140px; etc.
Or
Selector - property - attribute - value as defined by our CSS

Remember with an ID we need to reference it in our HTML with a <div></div> tag. You can name your ID selector whatever name you like, just be sure to reference it in a div tag like so:

<div id="logo">
<h1></h1>
<p></p>
etc
</div>

We can also define our positional or dimensional values with the use of percentages instead of pixels, like this:
#banner {width: 80%; height: 20%; position: absolute; left: 25%; top: 5%; background-image: url("banner.jpg"); background-repeat: no-repeat; background-attachment: fixed; }

However, percentages are not really an absolute value as determined by width and height on a screen, and when using them elements may appear with subtle differences in position depending on the browser being used. While pixel values are more exact, they also are fixed values, meaning they won't adapt in much any way depending on a say, a browsers window size, or size of an LCD screen. In this case percentages are better to work with, since not all LCD screens share the same size pixels or aspect ratios. With percentages, elements will generally appear larger in contrast to a larger screen, and smaller in contrast to a smaller screen, and the same percentage value can easily map out to more pixels on a larger screen and less on smaller, this is due to pixel density (the size of the pixels). It's best to work with percentages when defining your page styles. Make sure to test your pages in multiple browsers, this way you can be sure that all internet users can view your pages without problems. And test at as many resolutions as possible!

The code we just produced would position our webpage's banner in percentages from the top left corner of the screen. Notice the "background-attachment:" property, this defines how the content we just placed on our webpage will be viewed and placed in relation to other elements on the page. A value of "fixed" specifies that our element will remain confined to the space it appears in, while a value of "scroll" would allow our elements to scroll along with the rest of the page, such as with your browsers scroll bar. It's best not to scroll elements on the page.

Relative Positioning:

Positioning an element using relative positioning will cause that element to be positioned relative to the element that appears before it in a normal page flow. To put it plainly, you are positioning one element relative to the position of another. However, elements tend to "stack" one on top the other in a normal page flow (hence 'Cascading' style sheets), so elements cascade down the page, one after the other, like stacking blocks one on top the other.

So here's an example of using relative positioning:

#banner {width: 600px; height: 180px; background-image: url("our-example-banner-image.jpg"); position: relative: left: 0; top: 0; background-attachment: fixed; } (this element starts at the top left corner of the screen)
#image {background-image: url("image.png"); position: relative; left: 45px; top: 60px; }(this element appears 45 pixels from the left pushing toward the right, and 60 pixels from top of the banner)

In the case of the CSS declaration above, the "#image" (which could be an image of sorts that we want positioned somewhere on our page) selector would be positioned 45 pixels to the right of our banner image and 60 pixels from the top our banner as well, starting from the bottom of the banner image. But what if we wanted our '#image' selector to be positioned along side our banner? In this case we could change the display property of the '#image' selector to 'display: inline-block;' (display this element as a block level element inline) to force this element in our HTML markup to be positioned inline with the banner image on the page like so:

#banner {width: 600px; height: 180px; background-image: url("our-example-banner-image.jpg"); position: relative; left: 0; top: 0; background-attachment: fixed; } #image {display: inline-block; background-image: url("your-image.png"); position: relative; left: 45px; top: 0; }
(left here simply means 45 pixels from the left pushing towards the right)

Sometimes and depending on the browser in question, you may need to float an object left, right, or top, in order to get it to flow inline with the element before it, like so:

#image {background-image: url("our-example-image.jpg"); position: relative; left: 45px; top: 0; float: right; } (you can also use 'float-top', 'float-left', etc.)

If you float an element it will position it itself as far in the direction specified as possible. You can then use margins to get the appropriate position as discussed below.

Positioning With Margins:

We can also position elements on the screen using margins. I prefer this method over absolute or relative positioning as it follows the full natural flow of the page, setting a marginal area between adjacent elements.

Here's an example of elements positioned using simple relative positioning with margins:

#header {width: 60%; height: auto; background-image: url("your-example-image.jpg"); position: relative; left: 0; top: 0; }
#navmenu {display: inline-block; width: 99%; height: 15%; margin-top: 25px; float: left; } (we set our display property to 'inline-block' because we want our links for the 'navmenu' to display inline, not stack one on top the other!)

WHat we did here was declare the width our element 'navmenu' to take up virtually the entire screen horizontally, starting from the far left of the page, and positioned 25 pixels from the bottom of our header element.

We could now add more elements in the page flow, again using margins to place our elements:

#header {width: 60%; height: auto; background-image: url("your-example-image.jpg"); position: relative; left: 0; top: 0; }
#navmenu {display: inline-block; width: 99%; height: 15%; margin-top: 25px; float: left; }
#nav-vertical {display: block; width: 15%; height: auto; margin-left: 1%; margin-top: 25px; } we specified the width as 15% of the page horizontally, and we set the height to 'auto', which would now create a self expanding navigation menu which would expand as content was added to it.

So far we've defined elements and positioned them on the page, but we haven't declared any styles for them, so we should do this now. We can declare muliple elements to appear within our DIV's like so:

#navmenu {width: 99%; height: 15%; margin-top: 25px; float: left; }
(if you set your width to 99% you wont end up with a scroll bar!)
#navmenu nav {display: inline-block; font-size: 100%; font-family: arial, helvetica, 'times new roman'; text-align: left; color: red; margin-left: 5px; padding-top: 3px; padding-bottom: 3px; }
(Here we defined that the 'nav' element will appear inside our 'navmenu' selector within our DIV tag.)

Now we've added real style information to our 'navmenu' selector and we can now call this selector in our webpage markup. Because we specified to display our 'nav' element as 'display: inline-block;', the links for our menu will appear horizontally inside our DIV stretching from left to right. And, we can now add links to our navigation menu like so:

<div id="navmenu">
<nav>
<a href="link-one.html" target="_self">Link One</a>
<a href="link-two.html" target="_self">Link Two</a>
<a href="link-three.html" target="_self">Link Three</a>
etc.
</nav>
</div>

Inherited Positioning: This means for the element in question to inherit the positioning styles of the element before it in normal page flow.

HTML5 Powered with CSS3 / Styling, Multimedia, and Semantics