Relative Positioning: Web Design: CSS Part 22

relative positioning

Relative Positioning

Relative Positioning uses the same type of system as ABSOLUTE and FIXED. We add a position: relative; declaration and then the coordinates. The difference with relative is that it will position an element relative to where it would have normally displayed. An easy way for beginner’s to use this method of positioning is to first run your web page in a browser, decide what element you want to move, add position: relative; and the coordinates in the CSS code, and run the page again. For example, if you run a web page and decide that you want a certain element to be displayed a little more to the left, you can add the position: relative; declaration followed by a left: 10px; declaration. Notice how I said to add a left coordinate but not a top. This is perfectly okay to do. Refer to the first set of example images below, to start this lesson.

index.html Example 1

relative positioning

my-styles.css Example 1

relative positioning css

Relative Positioning Display Page Example 1

position: relative display

First, in the index.html document, we create five paragraph elements. And in the my-styles.css document, we just create a global p rule that gives a background-color of orange to all of our paragraphs. As you can see in the Relative Positioning Display Page Example 1, the five paragraphs display in BLOCK format by default. Each one taking up the full width of the browser with an orange background. Every new p element is displayed on a new line. Let’s use relative positioning to move the third p element. See the additional code in the example below.

index.html Example 2

relHTML2

my-styles.css Example 2

position relative css

Relative Positioning Display Page Example 2

position: relative css display

In the above example, we add a class with a name of relative to our third p element in our index.html. Over in the my-styles document, we add a CSS rule with a p.relative selector. This rule will affect every p element with a class of relative assigned to it. We give it some design declarations to have white text and a purple background. Finally, we add the position: relative; declaration with a top and left coordinate of 10 pixels. Looking at the Relative Positioning Display Page Example 2, we have now moved the third paragraph 10 pixels down and 10 pixels left from where it would display by default. NOTE: No elements will move to fit in the extra space left over by the element. Keep that in mind when you are using relative positioning. Let’s position one more element this way to finish up the lesson. See the images below.

index.html Example 3

relative positioning html

my-styles.css Example 3

position relative css

Relative Positioning Display Page Example 3

relative position display

In our final example, we add another new class in the HTML document; this time to the fourth p element. We name it relative-again. We add style with white text and a green background. Then the position: relative; declaration followed by bottom and right coordinates. When we look at the Display Page Example 3, we can see that the space left over is on the right side. One reason for this is because we have moved it up and left from its default position. Another reason is because we are removing the element from the natural flow like we discussed in the ABSOLUTE POSITIONING lesson. An element that is positioned relative can also be displayed on top of another element.

That finishes up this lesson. Relative positioning can be one of the more tricky systems to use and can take some practice. Experiment with it on some elements to see what results you get. As always, thanks for reading, I’ll see you next time.

index.html Source Code


<!DOCTYPE html>
<html>
<head>
<title>Relative Positioning</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>
<p>This is a normally displayed element.</p>
<p>This is a normally displayed element.</p>
<p class="relative">This element uses position: relative; and top and left coordinates.</p>
<p class="relative-again">This element uses position: relative; and bottom and right coordinates.</p>
<p>This is a normally displayed element.</p>

</body>
</html>

my-styles.css Source Code


p{
background-color: orange;
}
p.relative{
background-color: purple;
color: white;
position: relative;
top: 10px;
left: 10px;
}
p.relative-again{
background-color: green;
color: white;
position: relative;
bottom: 10px;
right: 10px;
}

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: