CSS POSITION Property
The position property of CSS is very important. If you are a CSS profesional, you must know about this property. Back in 7-8 years ago, website layout are mostly done by HTML tables. However, table structures are not flexible enough, so gradually, it is replaced by "div". There are alot of ways of using "div" to layout a web page such as using "float:left", "display:inline" or "position: relative" etc. In this articale, I want to talking about position property. I, personally, use position: absolute and position: relative more often.
Relative Positioning
If we have tow element, whith has position: relateve property. The first element is laid out just like a static element. The second element is then shifted vertically (according to the top or bottom property) and/or horizontally (according to the left or rightproperty).
The properties top, right, bottom, and left can be used to specify by how much the second element will be shifted. A positive value means the element will be shifted away from that position, towards the opposite side. For instance, a left value of 30px shifts the element 30 pixels to the right of its original position. Applying a negative value to the opposite side will achieve the same effect: a right value of -30px will accomplish the same result as a left value of 30px. The initial value for these properties is auto, which makes the computed value 0 (zero)—that is, no shift occurs. This is a example: I shift the second element 30 pixels to the right and 30 pixels to the top.
|
.element1 { |
Element 1
Element 2
|
Of course, we can't assign both left and right for the same element, because the position will be over-constrained. If the content direction is left to right, the left value is used, the right will be ignored. Nguoc lai, in a right-to-left direction, the right value used. If both top and bottom are specified, top will be used and bottom will be ignored.
Absolute Positioning
When I started to learning about CSS, I have a problem is make the logo layout at both header and content region (see the image above). At that time, I knew about Position property and absolute positioning and they help me to solve this problem. But when I assign positon: absolute to logo, the logo always align at top-left of the page. And final, I realized that I need to assign position: relative for the parent <div> of logo. So that the position top - bottom - left - right will caculate from parent <div> postion. If not, the position of logo will caculate from <body> tab.
Otherwise, there is a property which always combines with absolute positioning. It is the z-index. The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. If you don't assign z-index for an element, the value of z-index is 0 by default. So to make the logo align front of content you need assing z-index: 1 for logo, but I usually assign z-index: 10 as default.
This is overview about values of position property
| Value | Description |
|---|---|
| absolute | Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties |
| fixed | Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties |
| relative | Generates a relatively positioned element, positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position |
| static | Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations) |
| inherit | Specifies that the value of the position property should be inherited from the parent element |