HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 21: Absolute and Fixed positioning

Let's talk about two more types of positioning for your content. These two systems are not used as much anymore since the creation of responsive website's has become so popular recently. But we need to go over them anyway.

Absolute Positioning

If we use absolute positioning to position an element we are telling the browser exactly on the page where we want it displayed. We use the position property and the value absolute. Then we give it either a top or bottom value, and a left or right value. This can best be described in an example. Add this code to your ordered list rule in your style sheet:

ol {

font-style: italic;

border: 2px solid red;

width: 100px;

position: absolute;

top: 250px;

left: 450px;

}

®width: 100px; First we added a width to make our border for our list a little more realistic.

®position: absolute; And now we add our position property with a value of absolute.

®top: 250px; Here we are saying we want our ordered list to display 250 pixels down from the top of our browser window. You could have also used the property bottom here instead. In that case you would be saying display my ordered list 250 pixels up from the bottom.

®left: 450px; And finally we say also move my ordered list 450 pixels from the left of the browser screen. Again you could have used the right property here and positioned from the right. Most coders use the top and left properties for this type of system.

Now if you save/run your page you'll see that your improved ordered list with a nicer border has now jumped to a different part of the screen. And that is 250 pixels from the top and 450 pixels from the left. It's important to know here that positioning in this way removes the element from the natural flow similar to a floated element. An absolute positioned element when moved to a position can overlap another element on your page. As if it was laying on top of it. And you can use that to your advantage design-wise in some ways but it is unlike a floated element in the way that if you float an element it will still have some boundaries with the other elements on the page. So your other elements will move accordingly with the floated element and won't overlap. And if you re-size your browser window you'll notice that your ordered list will not move from the position you set because it is out of the natural flow. It is an inline element now. Note that an element that you position absolutely will first position off of a parent element that doesn't have a static position. You'll learn about static positioning in the next chapter. If there is no such element which will likely be the case then it will position off of HTML (the browser window) like with our ordered list. If you position something and it didn't end up being in the area that you want it to, It is very easy to adjust. Practice makes perfect with positioning. And even very experiences coders will tweak their positions many times when making a web page.

Fixed Positioning

Fixed positioning is completely out of the natural flow. When you position an element this way it will not move. Again the best way to describe this is by using an exercise: Add this code to your h3 rule in your style sheet:

h3 {

background-color: gray;

border: 5px solid yellow;

padding: 25px;

margin: 30px;

width: 400px;

position: fixed;

top: 300px;

left: 450px;

}

®width: 400px; We gave it a width to size it a little better like we did in the previous exercises.

®position: fixed; The only difference here is that we used the value fixed instead of absolute.

®top: 300px; We tell the browser that we want it 300 pixels from the top of the browser screen.

®left: 450px; And also 450 pixels from the left of the browser screen.

Okay when you run your code this time you'll see that your h3 heading has moved to the position we set. And we have the same result with resizing the browser window as we did with absolute positioning. But now use the scroll bar to scroll up and down the page. And as you can see our h3 heading is stuck in this position and it will never move. It is fixed in that place. There really isn't much use for this type of system besides advertisements and things of that nature. But besides that you wouldn't want to aggravate the people visiting your website. So that is the difference between using absolute and fixed positioning. Although we aren't going to be using these types of positioning methods they are still good to know and you will probably end up using them at some point.

Quiz Chapter 21

1.What is the main difference between absolute and fixed positioning on an element?

2.Which of these two systems described in this chapter can be used to overlap elements for design purposes?

3.What are the two most common sets of positioning properties that you can use to tell the browser where to display a fixed or an absolute element?