TUTORIAL: CSS Positioning

Status
Not open for further replies.

PixelPusher

Super Moderator
Staff member
Hello all,

Several people have been asking about the different types of css positioning...how to use them, is one better than the other, troubleshooting alignment, etc.

I figured it would help if I posted a thread covering some basics. All this information I have gathered through various websites and forums. I am just posting what I have learned through the years. The sole purpose of this thread is to show others how these techniques are implemented. So, without further adieu, here it is:

HTML:
<div class="rel">
	<h2>#1</h2>
    <p>relative position</p>
	<div class="abs">
    	<h2>#3</h2>
        <p>absolute position</p>
    </div>
    <div class="stat">
    	<h2>#2</h2>
    	<p>static position</p>
    </div>
</div>
<div class="fix">
	<h2>#4</h2>
    <p>fixed position</p>
</div>
Code:
body, div, h2, p {
font-family:Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0;
}
h2 {
font-size:18pt;
}
p {
text-transform:capitalize;
}
div.rel, div.abs, div.fix, div.stat {
font-size:10pt;
border:solid 1px #333;
padding:20px;
margin:0;
}
div.rel {
position:relative;
width:500px;
height:500px;
margin:50px auto;
background-color:#030;
}
div.abs {
position:absolute;
bottom:-25px;
right:-25px;
width:150px;
height:50px;
background-color:#093;
}
div.fix {
position:fixed;
right:5px;
bottom:5px;
width:75px;
height:300px;
background-color:#9C0;
}
div.stat {
border:solid 1px #fff;
background-color:#063;
height:70px;
margin-top:20px;
}
Static Position
The default setting for an element. It will follow the normal html flow of the page. Element cannot be adjusted with the "top, right, bottom, and left" values.

Relative Position
Element is positioned in the normal html flow of the page and its content can be adjusted (offset) using the "top, right, bottom, and left" values.

Absolute Position
Element is removed from the normal html flow. Position is adjusted through the "top, right, bottom, and left" values and is based on the first parent container that has a position set to a value other that static.

Fixed Position
Element is removed from normal html flow. Position is adjusted through the "top, right, bottom, and left" values. These values are based on the html tag (browser window).

Any questions/comments or other recommendations feel free to chime in :D
 
Last edited:

emilyl

New Member
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big
 

PixelPusher

Super Moderator
Staff member
hello all
I have a "question" about how to use absolute and relative positioning.
Actually i want to add 2 banners (ads) on may web site, outside the "container". Where the container is the very first div of my site, containing all divs.

The website width is 1000px, and when i'm opening the site in a bigger resolution i want to see the banners in the left and right, but without affecting my content. If the resolution is not big enough the banners have to sweep under the content ("container" div).

As far as i know i have to use absolute and relative positioning. i found few ways to do that but in other browsers like ie, chrome, safari i meet some problems.

I've seen few website with banners positioned like these, so there must be a way to do that. Can anyone help me with this?
tks in advance and sry for my English :)
Yes there is fairly simple solution for what your asking, but please post new questions in a new thread! :D

What you will need to use is "fixed" position. I will start the the thread for you this time around.
 

ronaldroe

Super Moderator
Staff member
I never knew you couldn't use top, left, etc. for static position. That explains so many of the issues I've had with positioning!
 

Sabooru

New Member
hi pixelpusher. I was going to make another post asking a bit regarding this but i figured you'd prefer me to post here than start a new conversation..

what I'm missing in regards to css positioning is how to center objects on a page. I've been playing with it a lot and looking at various examples but all of them seem to use CSS relative positioning. The problem is... everything starts pushing eachother around the page when you use it.


I initially used absolute positioning when I started designing my page and it worked well enough for me..
http://www.sillybomb.com

but now I've realised I want to switch to a centred view
http://www.sillybomb.com/indextrial.php

and I'm having a lot of troubles with the elements needing to have negative values etc.. and being illogically positioned in css to flow naturally on the page. Right now I've left it as you can see and the logo is being pushed downward by the shadow on the left.
I must be missing something simple I think..
Reckon its worth making a new thread for it?
 

ronaldroe

Super Moderator
Staff member
hi pixelpusher. I was going to make another post asking a bit regarding this but i figured you'd prefer me to post here than start a new conversation..

what I'm missing in regards to css positioning is how to center objects on a page. I've been playing with it a lot and looking at various examples but all of them seem to use CSS relative positioning. The problem is... everything starts pushing eachother around the page when you use it.


I initially used absolute positioning when I started designing my page and it worked well enough for me..
http://www.sillybomb.com

but now I've realised I want to switch to a centred view
http://www.sillybomb.com/indextrial.php

and I'm having a lot of troubles with the elements needing to have negative values etc.. and being illogically positioned in css to flow naturally on the page. Right now I've left it as you can see and the logo is being pushed downward by the shadow on the left.
I must be missing something simple I think..
Reckon its worth making a new thread for it?
Put the div with the "logo" class inside the one with the "headerBG" class.

Cool logo.
 

Sabooru

New Member
What about objects that span the entire page though. For example on another page I'm working on I'm creating a shadow to go behind the page content, however the shadow pushes the entire page down.

Eg. www.deakintv.com

the div to the right should match up next to the header div
I can't place it inside the header because then it will only span the size of the header.
And when I place it outside the header it moves underneath. The only way to get it to the top is to set its beginning position to a negative. As soon as I start adding a bunch of elements to the page the maths is going to become mind-numbingly ridiculous. Is there no other way?
 

Walter Warner

New Member
I may have missed this but in order to make an absolute element work, you would have make sue that the div that holds it is set to relative. Otherwise you will get a jumbled mess. By the way can anyone think of an example of where I would want to use an element with fixed positioning? I am new to web design.
 

LeeHarris

New Member
I may have missed this but in order to make an absolute element work, you would have make sue that the div that holds it is set to relative. Otherwise you will get a jumbled mess. By the way can anyone think of an example of where I would want to use an element with fixed positioning? I am new to web design.
There are many examples of where fixed positioning is useful. However, the 2 most commonly used are for fixing a background position - http://gradcolor.com/example-bg-att.php?att=yes (horrible web page but it gives you an example) or a fixed side bar or contact button - http://www.teehanlax.com/ (this is a nice example of a fixed side bar).
 

chrishirst

Well-Known Member
Staff member
I realise this is a very old thread BUT there is an error in it.

Relative Position
Element is positioned in the normal html flow of the page and can be adjusted using the "top, right, bottom, and left" values.
relative positioning does not actually work like that.

The box created by the element stays in the same position as it would be when static and occupies the same space in the document flow at that location. It is the content area that simply DISPLAYS in an offset position according to the values.
 

PixelPusher

Super Moderator
Staff member
I realise this is a very old thread BUT there is an error in it.

relative positioning does not actually work like that.

The box created by the element stays in the same position as it would be when static and occupies the same space in the document flow at that location. It is the content area that simply DISPLAYS in an offset position according to the values.
It's not an error, it simply could be explained in more detail, like you have so mentioned. Thanks.
 
Status
Not open for further replies.
Top