One of the most important properties that page elements can have is the position property. It's useful for controlling how elements appear in relation to other elements on the page.
- [Narrator] One of the most important properties that page elements can have is the position property. It's useful for controlling how elements appear in relationship to other elements, and they're pretty easy to understand. However, the absolute and fixed positions can be a little bit tricky, so it's a good idea to ask somebody the difference between them. Now, the position property is particularly useful for creating things like tooltips, and we'll take a look at an example of that in a few minutes. Now, the key thing to remember is that it helps you control how elements affect the flow of content within a page, and there are four main position properties available.
The default position is called static, and the other ones are relative, absolute, and fixed. Now, there's an experimental property called sticky that allows the content to stick to the page as it is scrolled, but it barely has any browser support as of now, so we're going to skip that one. One of the difference between these properties allow you to control whether the position of the element is adjustable by using additional position properties, for top, right, bottom, or left. Another difference is whether the property removes the current element from the normal flow of the document.
If it is removed, then the block containing the element will behave as if it wasn't there at all. Finally, the change in position appears in relationship to different elements on the page. So, it can either align to another element, or be relative to the entire document. Let's take a look at all of our different options. So, for example, static is not adjustable with the top, right, bottom, left properties, and it just places the elements in the normal flow.
This is the default state, so it's what you normally see when you load any HTML page. If we modify the position attribute to relative, then it stays in the normal flow, however, it can be adjusted with the top, right, bottom, left properties, and that will be relative to the current position on the page. Now, absolute and fixed are pretty similar. They're both adjustable with the TRDL, or top, right, bottom, left properties, and they both are removed from the current flow of content.
However, whereas fixed is always going to be relative to the entire document, absolute can either be set to the position of the parent element or the entire document, and that's why it's a little bit tricky. It's the one that we want to work with if we want to create something like a tooltip. So let's take a look at that example. We've got a series of buttons right here, and we have a tooltip that we want to add to these buttons. Right now, we have essentially just some set up CSS right here, and then something to make the button look nice, as well as the tooltip look a certain way, but we are not using any position properties yet.
If we take a look at our HTML, you'll see that it's pretty simple. We just have a series of buttons, and then inside each of those buttons we have a span with a class of tooltip, and this is the text that we want to become a tooltip when we roll over these elements. So, let's go back into the CSS and modify how these properties work. So, if we got the tooltip right here, by default it's going to have a position of static. Now, we can modify that to a position of relative if we want to, and if you do that, nothing is going to happen, or at least nothing looks like it just happened, but the position of the elements can be adjusted with the top, right, bottom, left.
So if we say left, 10px, and we save it, you can see that these tooltips are going to be where they would normally be drawn, but 10 pixels from the left of where that would be. So in the same way, if I say top and 10px, then they are where they would normally be drawn. It still takes up that space, but it's placed 10 pixels from the top of where they would appear. So, if I don't put this position relative, and it has by default a position of static, it's going to ignore this top, right, bottom, left property right here.
Let's go ahead and set it back to position relative, and then it shifts the positions as we saw just a minute ago. You can also put negative values in here, so minus 10 would sort of shift it up by 10 pixels, and so on, and so forth. If I modify the position property to absolute or fixed, they will be placed at the top of the page, and if I add, let's go ahead and set the left and top to zero. So now, they're going to be at the top left of the document.
And if I switch that to bottom, they would be placed at the bottom left of the screen, etc, etc. Now, it doesn't really matter if I do absolute and fixed. They are both going to work the same, except for if the parent container of the element is positioned as a relative element. So, let's go ahead and save this. You could see that, let's go ahead and add this to the left top again, and right now, my property here says absolute, and the property of the container, the buttons is set to nothing, which would be static by default, but if I modify this position, it'd make that a relative position.
Notice that right now these tooltips are placed right on top of the buttons, so it's taking each of these tooltips away from where they would display, and placed them aligned to each of the buttons. So, let's modify this to create a normal tooltip. I'm going to set the tooltips by default to display as none so that we can hide them. They're still there, and now you can see that they're actually removed from the normal flow of the document. Remember, we had more space here, but now we don't see them, and their spacing has been completely removed.
So, the next thing we would have to do is do a hover property, so whenever we hover over these buttons, we want the display property to be set to something else, we'll set it to block. And so what we'll do is we'll say, okay, on the item with the class of btn, whenever we hover those elements, I want you to modify the tooltip, and what I want to do here is display them as block elements. Let's go ahead and save that, and now when we rollover these elements, you can see that the tooltips show up.
Obviously, this is not a great position for them, so we can use the TRBL, top, right, bottom, left properties to modify where they show up, and what I'll do is I'll say bottom, and I'll do 38 pixels here. That means from the bottom of the screen, move them up by 38 pixels. And then what I'll do is, from the left of the screen, I'm going to move them by 10 pixels. Once I adjust the position properties, if I roll these over, you can see that they're sort of moved over, but there's a little bit of a problem, and that's because I left these other positions here.
So, let's save that, and now when I roll over, the elements are positioned relative to my buttons, which is what I wanted. You could adjust this a little bit, let's do 40 pixels here, see if that works a little bit better. And now they're sort of aligned to the top. You can put as much room as you want to in there, but you can see that this works really well, and is the same sort of technique that you would use for things like drop down menus, where you want the element to move with another element.
Now, here's some other pages where you can get more information about the position property, and some additional courses you may want to consider taking. If you have some ideas for this weekly series, maybe you want to share with me some questions you've been asked, or have asked in interviews, connect with me in LinkedIn, or just about any social media network, like Twitter or GitHub @planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.