HTML CSS Positioning
- 4 Different CSS Properties
- static Positioned with the normal flow of the web page. Not neccesary to declare. Syntax position: static ;
- relative Positioned relative to it's normal position in the page. Syntax position: left 40px;
- fixed Always stays in place, even when the web page is scrolled. Syntax position: fixed;
- absolute Located relative to nearest element which is positioned, or if there is none, relative to the web page.
Syntax position: absolute;
Positioning Examples
Static
div.static {
position: static;
border: 5px ridge red ;
}
Fixed Look at the lower right hand corner of the web page. This will stay in position, even if you scroll.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 400px;
border: 5px ridge orange;
}
Relative
div.relative {
position: relative;
left: 40px;
border: 5px ridge green ;
}
This is an example of an absolute position. It takes it's position within the "relative" class.
(Button may not work if you do not have Javascript enabled or pop-ups disabled)
(Button may not work if you do not have Javascript enabled or pop-ups disabled)
Absolute You will have to look in the upper right hand corner of the web page to see the example. Since it is not positioned within any other elements, it aligns itself with the web page.
div.absolute {
position: absolute;
top: 80px;
right: 5px;
width: 400px;
height: 200px;
border: 3px ridge purple;
}
I hope you will join us for the next lesson Lesson 17) Pseudo Elements
Additional Resources