Now that you’ve read through my Introduction to CSS and Lesson 1: DIV Elements, you should have a basic understanding of the way the <div> element works.
In this tutorial, I’m going to teach you all about <div> positioning which will help with creating certain website elements, like a floating menu bar.
Static Positioning
Example:
#nav {position: static;}
Where #nav is your ID selector.
Static positioning simply means that the <div> section remains in its place…
It remains “static”.
There is no special positioning applied to the element.
Relative Positioning
Example:
#nav {position: relative;}
Where #nav is your ID selector.
Relative positioning is basically saying that the element is static (in its place), but allows you to add some additional properties to move it around, relative to where it was positioned.
Example:
#nav {
position: relative;
top: 30px;
left:30px;
}this box is 30 px from the top of its container, and 30 px from the left
The above code tells the element to move 30px from the top of where it is positioned, and 30px to the left of where it is positioned.
You can also style this some more:
#nav {
position: relative;
top: 30px;
left:30px;
background-color: #000000;
color:#ffffff;
}
Now, the element will have a black background and white text.
Remember: relative positioned elements can “shift” from their static position within the code.
Fixed Positioning
Example:
#nav {position: fixed;}
Where #nav is your ID selector.
Fixed positioning means that the element will stay in the exact same place on your screen, even when you scroll down.
See that black box in the top left of the screen?
That’s an example of a fixed element.
The same properties are used to position it as in the relative positioning (top, left, bottom, right).
This is the positioning you want to use if you want a fixed menu bar or area of content to stay visible as you scroll down the page.
Unlike a relative positioned element, a fixed element is removed from the flow of the web page, which means that it ignores any elements it might be contained within and instead uses the viewport (or screen) as a base for its positioning, NOT any element it may be contained within.
This means that it can overlap other parts of your web page depending on where you position it.
Example:
#nav {
position:fixed;
top: 0px;
left:0px;
width:200px;
}
In the code above, we are telling the #nav element to be fixed to the very top of the screen, and the very left of the screen.fixed element example
Absolute Positioning
Example:
#nav {position: absolute;}
Where #nav is your ID selector.
This one is a little tougher to grasp, but once you do you can really create some cool things with it.
Absolute positioning is almost like fixed positioning, except instead of positioning the element relative to the screen, it is positioned relative to the nearest positioned ancestor, or rather, the first element that has a position other than “static”.
If there isn’t a positioned element to be found, it will position it relative to the <html> block, or document body.
In this case, it is also removed from the flow just like the fixed element and can be positioned anywhere on the screen instead of within an existing element.
It can overlap existing elements.
#navholder {
position:relative;
top:0px;
left:0px;
width:300px;
}
#nav {
position:absolute;
top: 40px;
left:200px;
width:200px;
}
This is the #navholder elementThis is the #nav element, absolutely positioned within the #navholder element.
Test Time!
Try adding each of these elements to your website to see what they do.
It’s usually easier to grasp these concepts when you can actually get your hands dirty and see what happens when you change properties of each one.
You don’t just have to position <div> elements, you can position any type of element you like!
Pop on over to W3Schools and try some examples.
You can view a list of positioning properties there, too!
