TUTORIAL: CSS Positioning

PixelPusher · 03-24-2010, 06:57 PM

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 Code:

<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 can be adjusted 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

elbow83 · 03-26-2010, 07:57 AM

dude thats awesome! thanks for sharing!

PixelPusher · 03-29-2010, 04:27 PM

Your welcome.

PixelPusher · 04-30-2010, 04:14 PM

Robert,

an excellent starting place to learn the basics of HTML and CSS would be W3Schools.com. Easy to follow, with plenty of examples.

Quote:

Originally Posted by robertlanham79

Hello everyone! I am new to this forum so please be patient with me...
I just got a promotion to web page designer for my company, truthfuly I am the 1st person in my 6 man electrical company here in Kentucky.
I was looking around and I found a site that allows me to create a web page for free. Being that my promotion didnt come with a raise, I figured that free was a very good starting place to explore web design!
I read this thread and I am totaly clueless as to what any of the lingo used here means.
So is there any site that I could visit that might teach me the VERY basics?
If anyone would like to see what I have came up with so far on web page design....
www.wix.com/robertlanham79/eamays and
www.wix.com/robertlanham79/ims-2
any suggestions or comments are greatly appreciated!!!

emilyl · 05-12-2010, 09:36 AM

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

maheshwebads · 05-21-2010, 07:10 AM

This is definition exactly as per w3cschools.com

moodeyit · 05-24-2010, 10:38 AM

Thankyou for sharing this dude

OpticMoon · 05-25-2010, 01:51 PM

Thx for sharing!

PixelPusher · 05-25-2010, 09:05 PM

Quote:

Originally Posted by maheshwebads

This is definition exactly as per w3cschools.com

You are correct this is similar and I made reference to the website in earlier posts. Thanks for sharing.

calvinklein · 06-20-2010, 04:07 PM

You can use css sprites that is mapping of images from a single image for faster image loading on your sites.

05-12-2010, 09:36 AM	#5
emilyl Bronze Member Join Date: May 2010 Posts: 81	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 __________________ Salon Management Software Active Directory Tools Property Management MN Respiratory Therapy Equipment

05-21-2010, 07:10 AM	#6
maheshwebads New Member Join Date: May 2010 Posts: 7	This is definition exactly as per w3cschools.com __________________ Mahesh photoshop filter effects and tutorial 80 excellent collection of Photoshop tutorial and filter effects

05-25-2010, 01:51 PM	#8
OpticMoon New Member Join Date: Feb 2010 Posts: 5	Thx for sharing! __________________ Optic Moon Webdesign

06-20-2010, 04:07 PM	#10
calvinklein New Member Join Date: Jun 2010 Posts: 9	You can use css sprites that is mapping of images from a single image for faster image loading on your sites. __________________ web design Australia

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

03-24-2010, 06:57 PM	#1
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	TUTORIAL: CSS Positioning 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 Code: <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 can be adjusted 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 shuvoimtiaz likes this. __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

03-26-2010, 07:57 AM	#2
elbow83 New Member Join Date: Mar 2010 Location: Dublin, Ireland Posts: 19	dude thats awesome! thanks for sharing! shuvoimtiaz likes this.

03-29-2010, 04:27 PM	#3
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	Your welcome. __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

05-24-2010, 10:38 AM	#7
moodeyit New Member Join Date: May 2010 Location: Bedfordshire, England Posts: 21	Thankyou for sharing this dude