Explaining CSS Positioning
Category: Articles, CSS Tips, CSS3 Tutorial | 947 views | 4 Comments |
When you’re going to use CSS positioning, the first thing you need to do is use the CSS property position to tell the browser if you’re going to use absolute or relative positioning.
What most people don’t realize when they’re using CSS to lay out Web pages is that there are actually four states to the position property:
- static
- absolute
- relative
- fixed
Static is the default position for any element on a Web page. If you don’t define the position, it will be static and will display on the screen based on where it is in the HTML document and how it would display inside thenormal flow of the document.
If you apply positioning rules like top or left to an element that has a static position, those rules will be ignored.
Absolute CSS Positioning
Absolute positioning is the easiest to understand. You start with the CSS position property:
position: absolute;
This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It is also taken out of the normal flow of the document - it won’t affect how the elements before it or after it in the HTML are positioned on the Web page. Read more…
