Part 1 – position:static, position:fixed, position:relative
This is the first in a 3 part seminar on the CSS position property. In this lesson we discuss how HTML elements are positioned on a page. Then we discuss how to use position:static, position:fixed and position:relative. We use the top, bottom, left and right properties to specify the position. Here are the highlights of this video:
- Understanding the position property
- What is the position property
- The normal flow of HTML elements
- The effects of position: static
- Positioning with the position property
- The effects of position: fixed
- The effects of position: relative
- The effects of position: absolute
- What is the z-index property
So the first thing we’re going to do today is have a little seminar on the position property and the position property is a method of positioning HTML elements. The CSS positioning properties allow you to position an element. It can also place an element behind another and specify what happens or what should happen when an element’s context or content is too large to be contained by the element.
There are 5 acceptable values for the position property. There’s static, fixed, relative, absolute, and inherit. So the normal flow of HTML elements is that an HTML element generally fills up all of the available horizontal space and then each element stacks on top of the other. And this is what’s called static positioning and so static position is the default behavior of an HTML element. So you can see this little image you know, if you had a div and a div and a div and a div, each one stacks on top of itself and fills up the container that it’s inside of. We can see an example of that here. Oh well, almost an example of that here. We’re going to go to CTLP Lesson 2 byobtutorial and we’ll look at floats and positioning. You can see that each of these elements here expands to fill all of the available space and then when it’s done in there, it stops and the next one starts and then the next one and the next one. So they all stack on top of itself.
If you assign the position of static to any HTML element, it will just follow its normal pattern. Now you generally don’t assign the static unless the position has been defined someplace else, then you want to change it back to static. But that’s what the effect of it is, it’s to return to its normal behavior.
Now when you are positioning with a position property, you can use the properties top, bottom, left and right in order to specify the element’s relationship to its container. Now, these properties won’t work unless the position property is set first and they also work differently in different positioning methods. Now the way they work is that positive numbers go toward the center of the screen and negative values go away from the center of the browser window or the browser screen. And you can use any of the ordinary css units of measurement for pixels, ems, percent, or points as a means of determining or specifying what position to take.
So the first thing we’re going to take a look at here is the fixed position property. Now the fixed position property means that the element is fixed in relationship to the browser window and the easiest way to show that is to go back to this example here. And I’m going to close that but open this, go down to custom css and then scroll down to where I have these things. So box 1 is this green element and if I assign it the position of fixed, it is going to stay in its spot here. You can see that as I scroll back and forth, it does not move. It stays exactly where it is and if what we want to do is we want to make it say, we want to be more specific about its position, we can let’s say, position this fixed and then we can say top: 10 px. And now, it’s 10 pixels away from the top and if we want to do the side, we could say, left 30%. And it’s going to come over there at 30%. You can see as you scroll, it stays in its own place.
Now, you can also see because of the way the navigation menu is constructed, you can also see the result of the z value. I’m going to go back and talk about z value as well in this. But the way z value works is z value specifies essentially the layer or the position in the sort of 3rd dimension where this element resides. And right now, it has a z value of 0 and the navigation menu has a z value of something positive, I don’t what it is actually, but it gives it a z value. And so, it sends out in front of the green box.
Notice also that as soon as we gave it a position, it reduced in size to the point where it only took up the necessary space. It only took up the minimum amount of space it needed. Before these… without a position specified, they expand all the way as far as they can to take the space whereas when we say the position is fixed, now it drops down to its minimum size necessary. Now we could obviously, give it a width to make it bigger say, width: 30% and that would…oops, I forgot a semi-colon there… width of 30% and left of 30% would make it larger but in the absence of a specific definition for its width through its height, it goes to its minimum size. Let’s just say its width is 100 pixels and let’s give it a height of 100 pixels. Okay, so there it is, the box right here.
Now, one other thing…if we wanted it to go off the screen for example, you could give it a top of minus 10 pixels and now you can see that it really… the top of it’s up here some place. So that’s the way top and left, bottom and right work. And let’s just go ahead and leave it there.Okay so that is position fixed and when you scroll, it stays exactly in its same relationship to the window.
Okay so the next position is relative and this is the one you’re probably going to use the most often. And an HTML element that is positioned to relative is positioned relative to its normal location. So for example, if we go back to this example and we look at box 2… now, if we say box 2’s position is relative, you’re going to notice that it doesn’t really change that. So position: relative; you don’t see any apparent change because it’s being located relative to its typical position and it’s in its typical position so nothing changes. However, you could move it from its typical position by saying top: 10 px and when you do that, you can see that it pushed it down 10 pixels from its regular position. If you said 100 px, it will push it down 100 pixels from its relative position. And unlike this scroll… I mean, unlike the fixed element, when you scroll, it still stays in its position relative to its original position. Whereas with fixed, fixed stays in the position relative to the browser window. Okay so that is scroll… I mean, I’m sorry. That is position relative.
And then let’s see, let’s go back over to the presentation.