Back
Next
CSS Tutorial will guide us now CSS Positioning
Elements, we can place an element exactly
where we want it on our webpage. Together with floats,
positioning gives we many possibilities to create an advanced and precise layout
for our website.
The following will be discussed in here now under CSS Tutorial section of Cascading Style Sheet Positioning Elements:
CSS Positioning Element Principle
For a moment imagine a browser window as a system of coordinates like under
picture.
The principle behind Cascading Style Sheet positioning is that you can position any box anywhere in the
system of coordinates.
Let's say we want to position a head line. By using the box model
the head line will appear as follows:
If we want this head line positioned 100px from the top of the
webpage and 200px from the left of the webpage, then we could set the following
CSS positioning for this element:
Example of CSS Positioning Element Principle
h1 {
position:absolute;
top: 100px;
left: 200px;
}
Result will be as follows for the above CSS Positioning element example.
As you can see, positioning with CSS is a very precise technique to
place elements. It is much easier than trying to use tables,
transparent images or anything else in website.
CSS Absolute Positioning
An element which is positioned absolute does not obtain any space in the webpage.
It means that it does not leave an empty space after being positioned in a
webpage.
To position an element absolutely, the position property is set as absolute.
We can
subsequently use the properties left, right, top, and bottom to place the box.
Example of Cascading Style Sheet Absolute Positioning
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
CSS Relative Positioning
To position an element relatively, the property position is set as relative in
Cascading Style Sheet.
The difference between absolute and relative positioning is how the position is being calculated
in web site development.
The position for an element which is relatively positioned is calculated from the
original position in the document. That means that you move the element to the right, to the left,
up or down. This way, the element still obtains a space in the document after it is positioned.
As an example of relative positioning, we can try to position three pictures
relatively to their original position on the webpage. Note how the pictures
leave empty spaces at their original positions in the document:
Example of CSS Relative Positioning
#element1 {
position:relative;
left: 350px;
bottom: 150px;
}
#element2 {
position:relative;
left: 150px;
bottom: 500px;
}
#element3 {
position:relative;
left: 50px;
bottom: 700px;
}
Example of CSS Positioning Elements
<html>
<head>
<title>CSS Tutorial at Global Guide Line</title>
<style type="text/css">
#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
#menu {
position: absolute;
top: 175px;
left: 0px;
width: 100%;
height: 12px;
background-color: gray;
color:white;
Font-weight:bold;
}
#content{
position: absolute;
top: 200px;
left: 2px;
width: 100%;
background-color: #FFFFFF;
color: #000000;
}
</style>
</head>
<body>
<div id="header">
<img src="banner.jpg"
width="100%" height="175" alt="header image at CSS Tutorial">
</div>
<div id="menu">
home | Forum | Services | Tutorials
</div>
<div id="content">
<h1>Online Web Tutorial on CSS</h1>
<p>Learn how to make a web site and manage with CSS</p>
</div>
</body>
Output of CSS Positioning Elements Example
Back
Next
| 
Home 
