CSS Position Property
Posted The: 02/06/2008 At: 3:13
Last Edited: 15/08/2008 At: 18:49
Contents:
The CSS position property, is used in conjunction with top, right, bottom, left, to position a given element.
Possible Values
Explanation of Values
Absolute positioning and static positioning by far, gives webdesigners some of the best options when it comes to layout.
Inherit
This just tells the browser, that the element will Inherit the positioning from its parent element.
Static
Elements are by default rendered as static. Elements with their position set to static, are rendered as a part of the normal page flow.
Relative Positioning
Position relative takes a given element, and places it relative from its static position in the document.
If a element has position:relative; applied, without any of: top, right, bottom, left. The element will simply stay where it was, almost as if we didn't apply any positioning, or as if we used the static value. However this opens up for absolute positioning.
Absolute Positioning
The specification says that applying position:absolute; to a element, will remove the element from the document flow, and position it relative to the nearest positioned ancestor, known as the containing block. If there isn't found any positioned ancestor, then the element will be placed relative to the initial containing block. Depending on the user agent, this may be any of html, or body.
Consider the below Example:
#Basement {
position: relative;
max-width: 800px;
}
#Banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 170px;
}By first applying position: relative; to the ancestor, and then position: absolute; to the child, we anable absolute positioning relatively to the edges of the ancestor.
Fixed Positioning
The fixed positioning is effectively capable of replacing frames. In the case of creating frame-like layouts, usually a fixed position gets applied to division tags. You have all the advantages of using frames, without the disadvantages.
Such as search engines not indexing your sites properly.
Fixed positioning is also useful to simply make a given element stay visible in the viewpoint while scrolling, I.E.
#navigation {
position: fixed;
top: 0;
left: 0;
width: 145px;
min-height: 255px;
}Inherited? - NO!
Comments: [0]
