Absolute Positioning: Web Design: CSS Part 20

Absolute Positioning

Absolute Positioning

Now that we know how to display our elements in BLOCK, INLINE, or INLINE-BLOCK format, we are moving on to positioning. There are quite a few ways to position your content. We are going to start with absolute positioning. Absolute positioning is when you explicitly tell the browser where to display an element, and is one of the more common ways to position content on your web page. An element that is positioned absolute is positioned relative to the nearest positioned ancestor. Refer to the PARENT/CHILD hierarchy lesson to better understand this. If there is no positioned ancestor on the page, it will use the document window (browser window). Before we start with this lesson, we need to talk about something called the natural flow of a web page. Up to this point, we have been displaying the majority of our elements in block or inline format by default. This is referred to as the natural flow because we are letting the browser display our web page content with its default formatting. We know that block elements will take up the entire length of the browser window and inline elements display side by side. We can convert elements by using the display property. As we go through these positioning lessons, you are going to see that most positioning systems remove or at least somewhat remove the element from the natural flow. The main reason for bringing this up now is that absolute positioning completely removes the element from the flow of the web page. This can be a good or a bad thing depending on what you’re trying to accomplish. If you want to purposely display an element on top of another element than this might be beneficial to you. We’ll see some examples of this later in this lesson. Refer to the images below for the first example.

absolute positioning html code

absolute positioning css code

absolute position display

We’ll start with the HTML. In the body of our index.html document, we have two p elements followed by four div’s. Each with their own class. The class names are red, blue, orange, and green. Our div elements do not contain any content because we are simply using them to create four COLORED squares. This will be done in our CSS code. Each class named with a color relates to the color of the square we are creating.

In our my-styles.css style sheet, we first set up a CSS rule with p as the selector. This is a global selector and will affect all p elements. The only function of this CSS rule is to make the background-color of the paragraphs yellow. Next, we have our four CSS class rules. They are identified by the period and the name of the class. Each one has background-color property that sets the color–matching up to the name of the class. All four of our class rules have a width and height of 200 pixels to create squares that are 200×200 in size. The final three declarations in our class rules are for absolute positioning. See the list below for an explanation of each of them. We will use the .red class as the main example.

Position Absolute, Top, and Left Properties and Values Explained

  • position: absolute;
    • This tells the browser we are positioning absolutely.
  • top: 100px;
    • We specify that we want the div to display 100 pixels from the top of the browser.
  • left: 10px;
    • We specify that we want the div to display 10 pixels from the left of the browser.

The three declarations above are just one way of positioning. First you specify how you are positioning with the position: absolute; declaration. Then, like in the above example, we said to display our div element 100 pixels from the top and 10 pixels from the left. Instead of the top and left properties, we could have also used bottom and right. These two declarations are only used for the purpose of specifying exactly where we want the element to display.

Looking at the other three class rules, you can see that the values for the left declarations are all different. This is because we are displaying the div’s side by side and we are taking into account the width of the colored div squares we created. Which is 200 pixels. And we are also adding an extra 10 pixels to create some space in between each of them. We kept the top declaration the same so that every colored square is 100 pixels from the top of the browser window. The next example shows how to position absolute again using the bottom and right properties, and how the elements are completely removed from the natural flow. We will show this by creating a stacking effect with our colored div squares.

position: absolute

positioning absolute display

Our index.html document stays the same. The changes in the second example are all in the my-styles.css style sheet. We have replaced the top and left properties with bottom and right. Now, we are specifically telling the browser to display our div elements a certain amount from the bottom of the browser screen and a certain amount from the right. Note that you can also use negative numbers in the values of the top, left, bottom, and right declarations. Just think of these as coordinates. The values in the bottom and right declarations are now altered to create a stacking effect for our colored squares. We are able to create this design because elements that are positioned absolute do not respect the boundaries of the other elements on the page.

Try out some different values in the coordinates, including negative numbers to see what happens. Note, that wherever your positioning “from“; If you enter 0px in the value, your element will bump right up against the edge of the browser. Our div boxes are 200×200, so if you enter a -300 value, the div will be displayed off screen. A little side homework project: In the .red class, try right: -300px; and then try left: -300px;. What happens to the red square for each? And can you scroll the screen to see it when using the left or right declaration? In the next lesson, we’ll be working with fixed positioning. Thanks for reading, I’ll see you next time.

index.html Source Code (from final example)


<!DOCTYPE html>
<html>
<head>
<title>Absolute Positioning</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>
<p>Just a sample paragraph.</p>
<p>Another sample paragraph.</p>
<div class="red">

</div>

<div class="blue">

</div>

<div class="orange">

</div>

<div class="green">

</div>

</body>
</html>

my-styles.css Source Code (from final example)


p{
background-color: yellow;
}
.red{
background-color: red;
width: 200px;
height: 200px;
position: absolute;
bottom: 100px;
right: 15px;
}
.blue{
background-color: blue;
width: 200px;
height: 200px;
position: absolute;
bottom: 125px;
right: 60px;
}
.orange{
background-color: orange;
width: 200px;
height: 200px;
position: absolute;
bottom: 150px;
right: 110px;
}
.green{
background-color: green;
width: 200px;
height: 200px;
position: absolute;
bottom: 175px;
right: 160px;
}

posted by Clear Coded Programming

2 thoughts on “Absolute Positioning: Web Design: CSS Part 20

Please Leave a comment

%d bloggers like this: