All You Want to Know About CSS Relative Positioning
CSS Position Property is the method that web designers use when they want to place any element on their page. This property has four different types of positioning: Absolute, Fixed, Relative, and Static. In this tutorial we are going to learn all about Relative Positioning. Thanks to CSS Relative Positioning we can generally place elements anywhere in the page and leave empty the space where they were positioned at first.
The other three types of positioning will be explained on other tutorials.
NOTE: This tutorial was completed using XHTML 1.0 Transitional with CSS. It is assumed you have basic knowledge of HTML and CSS principles.
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!
STEP ONE:
I created a XHTML document with different <div>s tags: One for the header, one for a container that includes a <div> for the content, and one for the footer.
Let’s have a look at the initial HTML setup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Relative Positioning</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<!-- end .header --></div>
<div class="container">
<div class="content">
<!-- end .content --></div>
<!-- end .container --></div>
<div class="footer">
<!-- end .footer --></div>
</body>
</html>
STEP TWO:
Let’s add an image into our content <div>. Wait! We don’t want our image to be part of the content. Easy! Let’s create a <div> for it.
<div class="content">
<!-- end .content --></div>
<div id="CheckMark">
<img src="images/CheckMark.gif" width="39" height="36" alt="Check Mark" />
<!-- end #CheckMark --></div>
STEP THREE:
Our image will appear at the left side of our page. Let’s offset our element to the middle of our container.
The first thing we need to do is to create a New CSS Rule to specify the position of our <div>.
#CheckMark {
}
#CheckMark {
position: relative;
left: 200px;
top: 50px;
}
STEP FOUR:
Debug in your favorite browser the HTML page. You’ll see your image moved to overlap the content, but its original space is reserved. Just before the image is displayed the browser offset its position to the one we specified.
STEP FIVE:
To conclude, let’s learn some facts about Relative Positioning:
- Keeps elements inside any container.
- Allows elements to have their own space reserved.
- The offset is from the position where it is placed in the page. (In this case under the content <div>.
- Browsers place a Relative Positioned element in any position we specify. Use top, or bottom, and left or right. Keep in mind the element will move relative to where it was originally placed.
- The <div> where we placed our image is going to occupy its original space.
- A Relative Positioned element can overlap other elements.
That’s all! You learned how to use Relative Positioning to move an element out of its container without moving the entire page’s elements out of their place.
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
