CSS allows easy positioning with relatively simple coding. Positioning in CSS enables us to create sophisticated page layouts, but it is important to note that it can get tricky at times. The following descriptions of the position values define how they should work in any given browser.
NOTE: While modern browsers typically implement these properties appropriately, sometimes a browser developer decides to do something out of the ordinary. Simply testing in as many environments as you can will help mitigate this issue.
Understanding the Position Property
The position property allows you to situate a particular element box in relation to where it would normally be in terms of the document flow. There are six major positioning schemes: relative, absolute, fixed, inherit, initial, and static. Of these, relative and absolute are the most frequently used. Let's take a quick look at what each of these keywords means before exploring relative, absolute, and fixed positioning.
|
| relative | Element positioned relative to its position in normal document flow |
|---|
| absolute | Positions relative to the element's first positioned ancestor |
|---|
| fixed | Positions relative to the browser view port |
|---|
| inherit | Sets the position property's value to match its parent's value |
|---|
| initial | Returns the position property to its default value |
|---|
| static | Default value, control of element display dictated by normal document flow |
|---|
Static, initial, and inherit position values are typically used to revert child elements to these states within parent elements that are positioned using the values relative, absolute, and fixed.
Absolute and fixed positioning remove the element from its location in normal document flow, allowing other elements to flow into its place.
Understanding the Offset (Side) Properties
The positioning schemes in CSS work best when they are combined with offset properties. Using the position property together with offset properties will yield better precision in layout. Offset (side) properties define how far the element's sides are from the element's containing block, or its parent element.
Values for the Offset Properties
There are four offset properties: top, right, bottom, and left. Each property coincides with its analogous side; that is to say, top defines how far the top edge of the child element is positioned from the top edge of the parent element, right defines how far the right edge of the child element is positioned from the right edge of the parent element, and so forth. These properties could either have the value of a specific length, a percentage, or they could have values such as static, auto, or inherit. In static positioning, the element is positioned without any offset, as if it were a non-positioned element. The value auto allows the browser to determine the offset of the element box so that it is only big enough to display its content. Its height and width are set automatically by the browser depending on the size of the content. With the inherit value, the offset properties of the parent element are inherited by the child element.
Getting Ready to Practice Positioning
Let's explore how relative, absolute, and fixed positioning values behave in the browser. We will look into each of these in more depth, practice in a demonstration page, then make the appropriate changes to our site.
Before we practice, let's watch this video to see how these positioning values effect our content.
NOTE: The video demonstrates the next section of content.
Description of the video:
[00:00:04]
>> Let's take some time to explore some of the C.S.S. positioning values and how they might work when where arranging items on a page with C.S.S. are going to focus on relative absolute and fixed positioning specifically here in today's demo I've got demo H.T.M.L. open in my web browser as well as a notepad plus plus here and brick wing to explore the C.S.S. positioning values and see how they work now the first one we're going to explore is relative relative is one of the trickiest values to understand it due to its unfortunate name US web developers sometimes are unclear as to what relative refers to the term relative can be understood sometimes as maybe relative to the parent element or relative to the top left hand corner of the page neither of these is accurate with C.S.S. positioning in its simplest sense relative positioning allows you to situate an element box in relation to where it would appear by default in the normal document flow that's to say when you are relatively positioning an element box five pixels to the right and five pixels from the top you're telling the browser to place it five pixels to the right and from the top of where it would be if it wasn't positioned at all we've got an example on the screen here that demonstrates a relatively positioned element box the like gray box here shows where the element would be if it were in the normal document flow while the dark gray box shows where we are positioning it using the relative value of a most important thing to know about this type of positioning is that unlike absolute and fixed positioning the element box isn't actually removed from the normal flow with the document we've just offset it from its normal position now in demo dot H.T.M.L. we're going to relatively position the element that's called Box you can see it right here it's this Green Square right here now if you look at it you'll notice if you look at the code document you'll notice that the box element is.
[00:02:00]
Child of the content element so the latter is functioning is the containing block and any kind of positioning we apply to the box element is going to be in relation to this larger element that contains the box so let's go ahead and move our box with relative positioning.
[00:02:18]
So to begin positioning this I'm going to go ahead and type some code in my code document. In my box roll over here in a position my cursor right at the beginning of this rule here and I'm going to type in position. Relative. Size saying yes we want to position it relatively from where it would be in the normal document flow and than top.
[00:02:46]
Seven hundred pixels. So what we've done here as we want we're telling our C.S.S. that we want to have this positioned relatively from its original spot seven hundred pixels away from where it would normally show in our normal document flow going to go ahead and save it. And then refresh and box appears to have disappeared but if I scroll down now boxes showing up at the bottom of our web browser it's positioned to seven hundred pixels away from the top aware it would be in the normal document flow unlike relative positioning fixed positioning removes the element box from the normal flow of the document entirely and then we tell it where we want to show up in our browser window now it's going to be situated in relation to the top of our viewport or our browser window is going to fix this element to a particular location that we state so even if our users scroll down the page that element box is going to stay fixed in its defined location since this element is going to be fixed to the viewport this property value is most used for positioning a background image or maybe a navigation bar that we always want visible to the user no matter where they are in the web page so let's demonstrate this next we're going to use the fixed value to position the nav bar L M.
[00:04:00]
If I scroll up here we've got this dark teal box named May Now we're going to position this with fixed values so that way we can see how this works so I'm going to go back over to my notepad plus plus document and look for the rule named nav bar I'm going to type in position fixed and then the specific position that I want to show up in when I do position.
[00:04:23]
Fixed. And then I'm going to position it two hundred pixels from the top. And fifteen pixels from the right. Now I'm going to go ahead and save this and then see what happens in our browser refresh my page now you can see in contrast to how box behaved when we still have the empty space where box would be in its normal document flow we can see that we pulled main nav bar completely out of the document flow and positioned it over here now lets see how absolute positioning works with C.S.S. in absolute positioning similar to fixed positioning that element box is going to be removed from the normal flow of the document and it doesn't have any relationship to other existing elements we're taking it out of the document flow entirely now we can position that element box based on our provided specifications absolute positioning allows us to specify where any side of the element box will be in relation to its first position to ancestor element or the browser viewport the best practice for using absolute positioning is to position the elements nearest ancestor using relative position but without any offset values that will allow the element to be moved around within its ancestor when we're putting together a web page designer should rely on the documents in normal document flow as much as possible and we should rarely use absolute positioning for positioning large chunks of page content as you're about to see on our demonstration using absolute positioning in this way make sure many different calculations lots of testing and a fresh rating to.
[00:06:00]
Process that takes a lot of tweaking to try and get our absolutely positioned elements to look the way we want in our demo dot H.T.M.L. file We're going to use the absolute value to position the banner and the content element boxes we're going to move them around on our page using absolute positioning now in the normal document flow the better element box is positioned on the top as it should be but depending on the browser you're using it might not be positioned all the way to the left or all the way to the top as you take a look at my browser I have a little bit of space around the top here and a little bit of space on the left typically the padding and margin of our body element are going to be removed using a C.S.S. reset but not in the case of demo dot H.T.M.L. now in order to ensure that this element is going to be persistent in the top left corner without any extra spacing we're going to absolutely position it zero pixels from the top and zero pixels from the left so I'm going to go back to notepad plus plus here and look for my banner rule and position my cursor right here and I'm going to type position absolute and then I'm going to add the top positioning and left positioning so that way I'm telling C.S.S. This is where we want this to show up.
[00:07:22]
So now we've got this value these values in here I'm going to go ahead and save this and refresh my page you can see here that banner has been completely removed from the document flow and put absolutely the very top there there's no space between banner and the edge of my web browser window but also sense we pulled it out of the normal document flow now it's overlapping content so now we're going to use position absolute to position content in a specific spot on our page so let's go ahead and position our content element box next we're going to use position absolute again and then specify different values for where we want content to land in our browser window it's going to look for my content rule and I'm going to go ahead and type position absolute.
[00:08:15]
I want a top positioning value of hundred five pixels away from the top. I want to position it one hundred fifty five pixels away from the right side of my browser. And I also want to position it one hundred eighty pixels from the left side of my browser.
[00:08:45]
Now I'll go ahead and save this and refresh my page. Now you can see that the content element has been pulled out of our normal document flow as well and positioned in the middle of the page where absolute positioning.
Let's practice positioning.
Step1. To open a new tab in the web browser and browse for the demonstration page, press:
Control key+t, Control key+o
Step2. If necessary, browse to the Code the Web folder in the Open File dialog box.
Step3. To open the sample web page,
Double-Click the positioning folder,
Double-Click demo.html
The page, demo.html, comprises four distinct sections: banner, navbar, content, and box. Each designated with color-coded element boxes. Since none of these boxes are positioned yet, they are displayed within the normal document flow.
Let's view the markup document.
Step4. To find demo.html, in your code editor, press:
Control key+o
Step5. If necessary, browse to the Code the Web folder in the Open File dialog box.
Step6. To view the code of demo.html,
navigate up one folder,
Double-Click the positioning folder,
Double-Click demo.html
You should now see the code of demo.html. Our document already has some CSS styles applied to it. The rules help us visualize the various pieces of content on the page.
Using the Relative Value to Position
Relative is probably the trickiest value of the six due to its unfortunate name. Users are oftentimes unclear as to what "relative" refers to. The term relative is sometimes understood as relative to the parent element or the top left hand corner of the page. Neither sense is accurate. In its simplest sense, relative positioning allows you to situate an element box in relation to where it would appear by default in normal document flow. That is to say, when you are relatively positioning an element box 5 pixels to the right and 5 pixels from the top, you are telling the browser to place it 5 pixels to the right and 5 pixels from the top of where it would be had it not been positioned at all. The image below demonstrates a relatively positioned element box:
The most important aspect to note about this type of positioning is that, unlike fixed and absolute positioning, the element box is not removed from the normal flow of the document. It is just offset from its normal position.
In demo.html, we will relatively position the element called box. If you look at the code document, you will notice that the box element is a child of the content element. Thus the latter functions as the containing block and any kind of positioning we apply to the box element will be in relation to this larger element.
Step1. If necessary, switch to your code editor.
Step2. To begin positioning, in the #box style rule, type the code in bold below [Region 4]:
#box {
position: relative;
top: 700px;
background-color: green;
margin-left: auto;
margin-right: auto;
width: 98%;
}
Exiting code block.
Step3. Save the changes and view them in a browser.
As the box style rule indicates, the box element should now be positioned 700 pixels lower than where it would normally be had it not been positioned.
NOTE: If you cannot see the box content, you may need to scroll down in the web browser.
Using the Fixed Value to Position
Unlike relative positioning, fixed positioning removes the element box from the normal flow of the document. With this positioning, the element is situated in relation to the top of the view port. In other words, the element is fixed to its particular location in the window, so even if the user scrolls down the page, the element box stays fixed in its defined location.
Since the element is fixed to the view port, this property value is mostly used for positioning a background image or a navigation bar which is always visible to the user no matter where he or she is on the web page.
To demonstrate this, we will use the fixed value to position the navbar element on the Web page.
Step1. If necessary, switch to your code editor.
Step2. To begin positioning, in the navbar style rule, type the code in bold below [Region 5]:
#navbar {
position: fixed;
top: 200px;
right: 15px;
background-color: teal;
width: 150px;
height: 250px;
}
Exiting code block.
Step3. Save the document and view the changes in the browser.
The navbar element should now be out of the normal document flow and placed 200 pixels from the top and 15 pixels from the right side of the view port. Accordingly, since the content element is still in the normal document flow, it moves upwards to take up the space vacated by the navbar element. In addition, the navbar element occupies the same position in the view port even when the page is scrolled down.
Using the Absolute Value to Position
In absolute positioning, similar to fixed positioning, the element box is removed from the normal flow of the document and bears no relationship to other existing elements. The element box can then be positioned based on the provided specifications.
Absolute positioning allows the developer to specify where any side of the element box will be in relation to its first positioned ancestor element, or the browser view port.
The best practice for using absolute positioning is to position the element's nearest ancestor using relative positioning, but no offset values, to allow the element to be moved around within the ancestor. Designers should rely on the document's normal flow as much as possible and rarely should absolute positioning be used to position large swaths of page content. As you will see in our demonstration, using absolute positioning in this way makes for many calculations, lots of tedious testing, and an overall frustrating design process.
In demo.html, we will use the absolute value to position the banner and the content element boxes. In the normal document flow, the banner element box is positioned on top, as it should be. But depending on the browser you are using, it may not be positioned all the way to the left or the top. Typically, the padding and margin of the body element are removed using a CSS reset, but not in the case of demo.html. In order to ensure that this element is positioned in the top-left corner, we will absolutely position it 0 pixels from the top and 0 pixels from the left.
Step1. If necessary, switch to your code editor.
Step2. To begin positioning the banner element box, in the #banner style rule, type the code in bold below [Region 6]:
#banner {
position: absolute;
top: 0px;
left: 0px;
width: 98%;
height: 30px;
border: 3px solid black;
}
Exiting code block.
Step3. Save the document and view it in a browser.
Since the specified location of the banner element is 0 pixels from the top and 0 pixels from the left of the page, the element appears to be positioned at the same location. However, since absolute positioning removes the element from the normal flow of the document, the content element, which is now the only element box within the normal flow, moves to the top of the page, overlapping with the banner element.
To avoid the overlapping, let's finish the exercise by positioning the content element.
Step4. If necessary, switch to your code editor.
Step5. To begin positioning the content element box, in the #content style rule, type the code in bold below [Region 7]:
#content {
position: absolute;
top: 105px;
right: 155px;
left: 180px;
width: 60%;
height: 800px;
border: 3px solid red;
}
Exiting code block.
Step6. Save the document and view it in a browser.
The content element is taken out of the normal document flow and located 105 pixels from the top, 155 pixels from the right side, and 180 pixels from the left side of the page.
Step7. Close demo.html in both the web browser and code editor.
Let's look into how to create a sophisticated layout for our large screen display.
