文档流的理解和定位（转）

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)

下面为转自http://www.cnblogs.com/huangbx/archive/2012/08/15/2640734.html

一、定位的专业解释(来自百度百科)

　　在CSS中关于定位的内容是：position:relative | absolute | static | fixed

　　　● static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。

　　　● relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

　　　● absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

　　　● fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

　　CSS中定位的层叠分级：z-index: auto | namber;

　　　● auto 遵从其父对象的定位

　　　● namber 无单位的整数值。可为负数

　　【注】什么是文档流：

　　文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。

 

　　二、我的理解（文字不理解的，看代码）

　　◆ static：以父级标签（用position限定）左上角为原点，根据top,left,right,bottom定死了，如果父级没有position限定，top、left等限定将不被浏览器解析（即无效）；并且在设计页面不能拖动。 

　　◆ relative：设计的时候以文本流（即实际可用空间，只有static和relative会占有文本流）左上角为原点，可以拖动（不影响和父级标签的相对关系），页面缩放时跟随父级标签缩放（相对位置不变），由于文本流的关系，与父级标签存在间接的相对关系。

　　◆ absolute：若父级标签用position的absolute和relative限定，设计的时候以父级标签左上角为原点；其它的（无position限定或者父级用static或者fixed限定的）则相对于body为标准；可以拖动；
        页面缩放时只在父级为positon中的absolute和relative限定的时候跟随父级标签（若没有，则以body为标准）缩放。

　　◆ fixed：相对于浏览器的可视窗口固定，在调整窗口的大小时，位置变化只与窗口有关。

 下面为表格说明：

	父级标签无position限定	父级标签用static限定	父级标签用fixed限定	父级标签用absolute限定	父级标签用relative限定
fixed	相对可视窗口	相对可视窗口	相对可视窗口	相对可视窗口	相对可视窗口
absolute	相对body	相对body	相对body	相对父级	相对父级
relative	相对文本流定位（与父级有间接关系）
static	相对父级定位 top等限定无效	相对父级定位 top等限定有效	相对父级定位 top等限定有效	相对父级定位 top等限定有效	相对父级定位 top等限定有效

 

　　

 

 

 

 

文字永远是枯燥的，本来想画图说明的，但是觉得麻烦，代码能够更好的说明，请看详细测试代码：

css代码（position.css）：

body 
{
    margin:0;
}
#top
{
    margin: auto;
    width: 850px;
    height: 180px;
    background-color: #99CCFF;
}
.layer_banner
{
    border: 10px solid #808000;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: 100px;
    background-color: #99CCFF;
    position: relative;
    top: -1px;
    left: 45px;
}
.layer_banner_ab
{
    border: 10px solid #808000;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: 100px;
    background-color: #99CCFF;
    position:absolute;
    top: 391px;
    left: 100px;
}
.layer_banner_st
{
    border: 10px solid #808000;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: 100px;
    background-color: #99CCFF;
    position:static;
    top: 197px;
    left: 84px;
}
.layer_banner_fi
{
    border: 10px solid #808000;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: 100px;
    background-color: #99CCFF;
    position:fixed;
    top: 560px;
    left: 82px;
}
.layer_re
{
    position:relative;
    margin:10px;
    padding:10px;
    top: -75px;
    left: 246px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_ab
{
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 31px;
    left: 405px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 155px;
}
.layer_fi
{
    position:fixed;
    margin:10px;
    padding:10px;
    top: 60px;
    left: 603px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_st
{
    position:static;
    margin: 10px;
    padding: 10px;
    top: 7px;
    left: 199px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 451px;
}
.layer_re1
{
    position:relative;
    margin:10px;
    padding:10px;
    top: -84px;
    left: 482px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_ab1
{
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 19px;
    left: 147px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 413px;
}
.layer_fi1
{
    position:fixed;
    margin:10px;
    padding:10px;
    top: 445px;
    left: 450px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_st1
{
    position:static;
    margin: 10px;
    padding: 10px;
    top: 7px;
    left: 199px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 451px;
}
.layer_re2
{
    position:relative;
    margin:10px;
    padding:10px;
    top: -75px;
    left: 246px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_ab2
{
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 223px;
    left: 212px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    }
.layer_fi2
{
    position:fixed;
    margin:10px;
    padding:10px;
    top: 219px;
    left: 536px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_st2
{
    position:static;
    margin: 10px;
    padding: 10px;
    top: 7px;
    left: 199px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 451px;
}
.layer_re3
{
    position:relative;
    margin:10px;
    padding:10px;
    top: -93px;
    left: 189px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_ab3
{
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 300px;
    left: 312px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 481px;
}
.layer_fi3
{
    position:fixed;
    margin:10px;
    padding:10px;
    top: 605px;
    left: 648px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_st3
{
    position:static;
    margin: 10px;
    padding: 10px;
    top: 7px;
    left: 199px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 451px;
}
#content
{
    margin: auto;
    width: 850px;
    height: 800px;
    background-color: #CCFFCC;
}
#bottom
{
    margin: auto;
    width: 850px;
    height: 130px;
    background-color: #F0F0F0;
}

html页面代码：

View Code

结果：

缩放之后：