{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

CSS Positioning Tutorials

CSS allow you to position HTML elements within your web pages and HTML elements within other HTML elements. You can also overlap HTML elements on top of or below other HTML elements.

There are 4 different types of positioning methods and 1 method of overlapping HTML elements.

The 4 positioning methods are listed below:

Method Description
Static Positioning HTML elements are have a static position by default. This means that they appear one after another in the web page.
Fixel Positioning An HTML element with a fixed position is positioned relative to the web browser window.
Relative Positioning An HTML element with a relative position is positioned relative to its normal position.
Absolute Positioning An HTML element with a position of absolute is positioned relative to the first parent element that has a position that is not static. If there is no such element, the containing block is <html>.

The overlapping method is listed below:

Method Description
Overlapping HTML elements can be stacked on top of or below of other HTML elements.

To understand positioning in CSS, you must have an understanding of the box model. Every HTML element, including the <html> element, is considered a rectangular container that can have content within it. Every HTML element has a margin, padding and a border.

CSS box model

CSS Static Positioning

HTML elements are have a static position by default. This means that they appear one after another in the web page also called appearing in the normal flow of content.

HTML elements can have a static position by one of two ways: by including the position property with a value of static within the selector of the HTML element or by simply not including the position property.

The code example below shows you how HTML elements are positioned statically without including the position property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div.one { width:100px; height:100px; background-color:yellow; border:1px solid black; } div.two { width:100px; height:100px; background-color:red; border:1px solid black; } div.three { width:100px; height:100px; background-color:blue; border:1px solid black; } div.four { width:100px; height:100px; background-color:green; border:1px solid black; } </style> <body> <h1> This is a heading. </h1> <div class="one"> This <div> has a class name of one. </div> <div class="two"> This <div> has a class name of two. </div> <div class="three"> This <div> has a class name of three. </div> <div class="four"> This <div> has a class name of four. </div> </body> </html>

The web page that the code example creates is here: CSS Positioning Example.

Absolute Positioning

Absolute positioning is used to place an HTML element is a specific place within a web page relative to the first containing parent element that has a position other than static. If there is no other such elememt, the <html> element becomes the parent containing block.

The code example below shows you how HTML elements are placed within a web page using absolute positioning. The <html> element is the containing block in this example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div.one { width:100px; height:100px; border:1px solid black; background-color:yellow; position:absolute; top:0; left:0; } div.two { width:100px; height:100px; border:1px solid black; background-color:red; position:absolute; top:0; right:0; } div.three { width:100px; height:100px; border:1px solid black; background-color:blue; position:absolute; bottom:0; right:0; } div.four { width:100px; height:100px; border:1px solid black; background-color:green; position:absolute; bottom:0; left:0; } </style> <body> <h1> This is a heading. </h1> <div class="one"> This <div> has a class name of one. </div> <div class="two"> This <div> has a class name of two. </div> <div class="three"> This <div> has a class name of three. </div> <div class="four"> This <div> has a class name of four. </div> </body> </html>

The web page that the code example creates is here: CSS Positioning Example.

The code example below shows you how HTML elements are placed within a another HTML element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div { width:100%; height:100%; border:1px solid black; } div.one { width:100px; height:100px; background-color:yellow; position:absolute; top:0; left:0; } div.two { width:100px; height:100px; background-color:red; position:absolute; top:0; right:0; } div.three { width:100px; height:100px; background-color:blue; position:absolute; bottom:0; right:0; } div.four { width:100px; height:100px; background-color:green; position:absolute; bottom:0; left:0; } </style> <body> <h1> This is a heading. </h1> <div> <div class="one"> This <div> has a class name of one. </div> <div class="two"> This <div> has a class name of two. </div> <div class="three"> This <div> has a class name of three. </div> <div class="four"> This <div> has a class name of four. </div> </div><!-- end class container --> </body> </html>

The web page that the code example creates is here: CSS Positioning Example.

Relative Positioning

Relative positioning allows you to position HTML elements relative to where they would ordinally be placed within the flow of content

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div.container { width:500px; height:500px; margin:0 auto; border:1px solid black; } div.one { width:100px; height:100px; position:relative; background-color:yellow; left:0; } div.two { width:100px; height:100px; position:relative; background-color:red; left:75px; } div.three { width:100px; height:100px; position:relative; background-color:blue; left:-75px; } </style> <body> <h1> This is a heading. </h1> <div> <div class="one"> This <div> has a class name of one. </div> <div class="two"> This <div> has a class name of two. </div> <div class="three"> This <div> has a class name of three. </div> <div class="four"> This <div> has a class name of four. </div> </div><!-- end class container --> </body> </html>

The web page that the code example creates is here: CSS Positioning Example.

Fixed Positioning

Fixed positioning allows you to position an HTML element in a fixed position within the web page, even if the web page is being scrolled.

NOTE: Internet Explorer supports the fixed value only if a !DOCTYPE is specified.

NOTE: Internet Explorer 6 does not support fixed position. There are some workarounds to this problem and some of them will be explained in this tutorial at a later date.

The code example below shows you how to position HTML elements in a fixed position on the web page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div.one { position:fixed; top:0; left:0; width:100px; height:100px; background-color:yellow; } div.two { position:fixed; top:0; right:0; width:100px; height:100px; background-color:red; } div.three { position:fixed; bottom:0; right:0; width:100px; height:100px; background-color:blue; } div.four { position:fixed; bottom:0; left:0; width:100px; height:100px; background-color:green; } </style> <body> <h1> This is a heading. </h1> <div class="one"> This <div> has a class name of one. </div> <div class="two"> This <div> has a class name of two. </div> <div class="three"> This <div> has a class name of three. </div> <div class="four"> This <div> has a class name of four. </div> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> <h1> This is a heading. </h1> </body> </html>

The web page that the code example creates is here: CSS Positioning Example.

Overlapping Elements

CSS allows you to layer positioned HTML elements on top of and below one another along an invisible z-axis using the z-index property. The z-axis is the an imaginary line along the computer window. The z-index property allows you to position HTML elements on top and below the z-axis if the HTML elements are positioned relative, absolute or fixed.

The z-index property and its' values are listed below.

Property Values
z-index auto, integer

The code example below shows you how to position an HTML element using the z-index property with a negative value.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> img { position:absolute; left:0px; top:0px; z-index:-1; } </style> <body> <h1> This is a heading </h1> <p> <img src="image.gif" alt="image" /> The image in this example has a position of absolute and a z-index property with a value of negative 1. This results in the image being layered below the content. </p> </body> </html>

The web page that the code example creates is here: CSS Positioning Example.

The code example below shows you how to position an HTML element using the z-index property with a positive value.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> img { position:absolute; left:0px; top:0px; z-index:1; } </style> <body> <h1> This is a heading </h1> <p> <img src="image.gif" alt="image" /> The image in this example has a position of absolute and a z-index property with a value of 1. This results in the image being layered below the content. </p> </body> </html>

The web page that the code example creates is here: CSS Positioning Example.

Tutorials

Templates

References

Sponsors

You can get your website online using Velnet, a leading UK web hosting provider. They provide free template and installation for WordPress blogs. Discuss webmaster related topics at Webmaster Serve, a Webmaster SEO forum

SouthernWebGroup.com provides high quality website design in Atlanta, GA as well as around the world.

Find low cost cheap website hosting and domain registration.

Browser our free no ads web hosting directory and find the free web hosting that's right for you and your budget.

Advertise your web design and web development related products and services here.

Recommended

Download free css web hosting templates that are easy to edit at FreeWebHostingTemplates.com.

Friends