CSS， Absolute 排版和 relative排版浅谈

Position can be set to the following values:
* static
* absolute
* relative
* fix

1. static, the default position property

2. absolute, absolute position is regarded to its parent elment, for example
<div id="main">
   <div id="nav"></div>
   <div id="content"></div>
</div>

#main {
 position :          relative;
 width :             850px;
 height :            650px;
 
 background-color:   red;
}

#nav {
 position :          absolute;
 width :             300px;
 height :            600px;
 top:                200px;
 float  :            left;
 background-color :  blue;
}

#content {
 position :          relative;
 width:              500px;
 height:             600px;
 left:               200px;
 top:           200px;
 float :             left;
 background-color :  green;
}

1. Abbolute排版中：
top, left, right, bottom 是子元素和父元素的关系， 例如 nav和main 就是这种关系。
margin 是两个相连的元素（div）之间的间隙关系。margin 规定了自己和周围元素之间的距离。
padding 是元素内部内容和自己的边框的间隙关系。

 

2. Relative 排版中：
top, left, right, bottom 是元素之间关系， 例如 nav和content 就是这种关系。
margin 是子元素和父元素的关系， 例如 nav和main 就是这种关系。
padding 是元素内部内容和自己的边框的间隙关系。

3. Absolute Inside Relative 排版
top, left, right, bottom 是子元素和父元素的关系， 并不是相邻两个元素之间的关系。例如nav和main就是这种关系。
margin 规定了自己和周围元素之间的距离。
padding 是元素内部内容和自己的边框的间隙关系。

我们知道在CSS排版中， 很容易向左和向上对齐与固定元素的位置， 但是很多时候我们需要固定向下和向右的距离，我们怎么做呢， 答案是使用 Absolute inside relative, 然后设置在CSS中设置 bottom 或者 right 属性。 例如，我们想固定productLogo的下边框和content的距离是30px, 代码如下：

<div id="main">
   <div id="nav"></div>
   <div id="content">
      <div id="productLogo"></div>
   </div>
</div>

#main {
 position :          relative;
 width :             850px;
 height :            650px;
 
 background-color:   red;
}

#nav {
 position :          absolute;
 width :             300px;
 height :            600px;
 top:                200px;
 float  :            left;
 background-color :  blue;
}

#content {
 position :          relative;
 width:              500px;
 height:             600px;
 left:               200px;
 top:           200px;
 float :             left;
 background-color :  green;
}

#productLogo {
    position:             absolute;
    bottom :              30px;
}

我们设置 position属性为absolute,bottom属性为30px, 这样就可以保证div productLogo向下的距离是30。
注意我们没有使用任何javascript，其实javascript也可以做到， 源码所示如下：
#productLogo {
    position:             relative
}

javascript code:
function locateProductLogo() {
 var content = document.getElementById("content");
 var productLogo = document.getElementById("productLogo");
 
 productLogo.style.marginTop = content.offsetHeight * 0.85 ;
}
注意我们使用了offsetHeight属性， 而这个属性是只读属性！还有我们使用了marginTop固定productLogo.

 

 

下面给出 top, right, bottom, left，margin的说明：

1）margin:

This property sets the size of the margins surrounding the selected element(s).

2）top

This property lets you set the distance between the top edge of an absolute positioned element (including its padding, border, and margin) and the top edge of the positioning context in which it resides. The positioning context is the padding area of the element’s nearest ancestor that has a position property value other than static, or the body element.

For relative positioned elements, this property sets a relative offset from the normal position of its top edge. So, a setting of 10px will shift the top edge of the box ten pixels downward, and a setting of -10px will shift it ten pixels upward.

3）right

This property lets you set the distance between the right edge of an absolute positioned element (including its padding, border, and margin) and the right edge of the positioning context in which it resides. The positioning context is the padding area of the element’s nearest ancestor that has a position property value other than static, or the body element.

For relative positioned elements, this property sets a relative offset from the normal position of its bottom edge. So a setting of 10px will shift the right edge of the box ten pixels to the left, and a setting of -10px will shift it right by the same amount.

4） bottom

This property lets you set the distance between the bottom edge of an absolute
positioned element (including its padding, border, and margin) and the bottom
edge of the positioning context in which it resides. The positioning context is the
padding area of the element’s nearest ancestor that has a position property value
other than static, or the body element.
For relative positioned elements, this property sets a relative offset from the
normal position of its bottom edge. So, a setting of 10px will shift the bottom
edge of the box up by ten pixels, and a setting of -10px will shift it down by the

5）left

This property lets you set the distance between the left edge of an absolute positioned element (including its padding, border, and margin) and the left edge of the positioning context in which it resides. The positioning context is the padding area of the element’s nearest ancestor that has a position property value other than static, or the body element.

For relative positioned elements, this property sets a relative offset from the normal position of its left edge. So, a setting of 10px will shift the left edge of the box ten pixels to the right, and a setting of -10px will shift it ten pixels to the left.