Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In addition to floating elements, you can specify element placement by using the position style property. The position attribute has three values: relative, absolute, and fixed. The default value is considered to be static, which can be explicitly stated if you need to override another value. Unlike absolute or fixed positioning, relative positioning is still considered part of normal document flow, and the positioned elements are treated as such. Relative positioning basically offsets an element relative to where it would be normally found within the page.
We can set left, top, right, and bottom values to control its location. The space originally occupied by the element is left untouched and behaves as if the element is still there. This can sometimes create a hole in your document where the element used to be. Other items in your layout still react to it when the positioned element is modified. And the empty space that marks its original location will expand or contract based on that. Well, let's take a look at that in action. Here we have the relative_positioning.htm file open from the 10_05 folder.
We have three div tags on the page. They are identified as Box 1, Box 2 and Box 3 and they each have a paragraph inside of them. If we look over our CSS styles, we have some very generic styles that are styling our divs and the paragraph inside of the div, but nothing that's driving any of the individual boxes. So we're going down to create those. So I'm going to add a brand-new CSS rule and I'm just going to go ahead and make this an ID selector and I'm going to do #box1. So we're going to position the Box 1 element and we'll go ahead and define it in This document only.
Go ahead and click OK. Now, if you go down your categories and you go the Positioning category, you can see the Position attribute right here. If you grab the pulldown menu, notice that we can choose between absolute, fixed, relative, and static. For this exercise, we're going to choose relative. So after relative positioning, if we want to offset it, we can use any of the Placement values. We can offset it by the top, the right, the bottom and the left. Now, if you offset something using the right value, the right edge of the object will be offset from the right edge of the containing element.
If you use left, the left edge of the element is going to be offset from the left edge of the containing element. The same is true for top and bottom. So typically, you're going to use the main conjunction with top and or right or left and bottom and or right or left. But you probably won't use more than two of them at a time. So here, we're just going to do a left offset and I'm going to give this a left offset of 150 pixels. Now, I'm going to go ahead and click OK and watch what happens to our layout. Box 1 moves to the right, but Box 2 and Box 3 are totally unaffected by this.
This is very different than floats. If I would've floated Box 1 to the right, Box 2 and Box 3 would have moved up to occupy the empty space. But with relative positioning, the other elements on the page still assume that the first element is there. In fact, if we go to Box 1 and increase its height value, so let's make its height say 200 pixels, notice that it pushes 2 and 3 down correspondingly. So relative positioning might seem fairly easy, but as layouts get more complex, it's difficult to remember where an element's original position is supposed to be.
Trying to keep track of which element is going to respond to other elements being modified can be a nightmare. Because of this, page layouts are not created using only relative positioning. Rather relative positioning is used more to tweak or nudge elements within your existing document flow. Now, relative positioning has another more common use for page layout as well. It's very common to set an element's positioning attribute to relative and then not offset it. This allows the element to act as a parent element for any absolutely positioned elements inside of it.
That might not make a whole lot of sense right now but it will when we discuss absolute positioning in our next movie.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.