Learn CSS by Watching Videos, Tutorials and Examples
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 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>FreeCSSVideoTutorials.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>FreeCSSVideoTutorials.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>FreeCSSVideoTutorials.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>FreeCSSVideoTutorials.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.
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>FreeCSSVideoTutorials.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>FreeCSSVideoTutorials.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>FreeCSSVideoTutorials.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.
