CSS有三种基本的定位机制：普通流、浮动、绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
没有任何定位修饰效果
- 块级元素从上到下一个接一个地排列，元素之间的垂直距离是由元素的垂直外边距计算出来。
- 行内元素在一行中水平布置。如图中
P标签内的span，超链接，图片。
-
<h2>行内元素的布局</h2>
可以使用水平内边距padding-leftpadding-right、边框border-leftborder-right和外边距margin-leftmargin-right调整它们的间距。
但是，垂直(top bottom方向)内边距、边框和外边距不影响行内框的高度。这句话的意思是，在上图中如果定义span垂直方向上的边距，不会因此而扩充P的高度。还要铭记一点，行内元素没有高度。
span{
background: blue;
padding-left: 20px;
padding-right: 20px;
border: 10px solid yellow;
margin-right: 20px;
margin-left: 20px;
}
<div>
<p><span>hi</span>hello</p>
</div>
左:IE6 右：IE8
调整水平方向的间距，是可以有效果的。
IE6出现上边距被隐藏，是因为p在IE6内是没有默认margin-top。所以p的顶部与body的顶部重合，并没有空余的位置供span的上边距展示。
但是无论怎么样，P的高度也没有因此被扩大。
再设置一下垂直边距，再加一个p与span，增强一下效果。
发现第二行的p中的span增大内边距后占据上一行中的span。
<span>
padding-top: 30px;
padding-bottom: 20px;
margin-bottom: 20px;
margin-top: 20px;
</span>
效果
不过，设置行高可以增加这个框的高度。
默认情况下，p中的span是继承其父元素的line-height的，但是我们单独设置line-height也会影响p的行高。span{ line-height: 100px;}
效果
-
<h2>块级元素的定位</h2>
-
static
默认。参照正常的文档流。当未对元素设置定位时，元素的默认的位置，即是按照static定位的。
div{
font-family: "微软雅黑";
color:white;
font-weight: bold;
line-height: 100px;
text-align: center;
font-size: 30px;
width: 100px;
height:100px;
}
#d1{
background: pink;
}
#d2{
background: yellow;
}
<div id='d1'>第一</div>
<div id='d2'>第二</div>
position：static 默认效果
-
relative
生成相对定位的元素，相对于其正常位置进行定位。它原本所占的空间仍保留。
#d2{
background: yellow;
position: relative;
top:30px;
left: 20px;
}
position：relative
需要注意的是，在定义完位置的属性为relative是，需要为元素指定top、left、right、bottom。上例子中，div2在左面，上面有div1，所以需要为div2设置left、top。
#d1{
background: pink;
position: relative;
top: 20px;
left: 20px;
}
position:relaitive
发现div1参照其初始位置的顶部向下移动20px，但是并没有导致div2向下移动。div2由于其在文档流的下面，所以会覆盖div1。
#d1{
background: pink;
position: relative;
bottom: 50px;
}
#d3{
float: left;
}
加了一个浮动后
虽然div1设置了bottom: 50px;所以空出来50px的位置，但是当增加一个#d3（即那个长的），并被设置为浮动后，发现，他并没有向上浮动挨着div1，说明原本所占空间被默认保留。 -
absolute
元素框从文档流完全删除，并相对于其包含块（父级元素）定位。
包含块可能是文档中的另一个元素或者是初始包含块。
#d2{
height: 120px;
background: yellow;
position: absolute;
top:50px;
left: 50px;
}
<body>//包含块
<div id='d1'>第一</div>
<div id='d2'>第二</div>
<div id='d3'>第三</div>
</body>
# d2 position: absolute;
元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。如图，d3占据了div2的位置，div2相对于父级元素body定位。
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
span{
line-height: 2rem;
background:url(bac1.jpg);
position: absolute;
top: 50px;
left: 50px;
}
<div id='d3'><span id="">插入的span</span>第三</div>
效果
上图是在ie9及现代浏览器中的结果。即使是内联元素，当position:absolute;之后，也会生成一个块级框。
有这样的效果，前提是span的父级元素，没有定位，即没有设置position：除了默认，那么span就根据最外层以定位的元素定位，都没有就可以根据根元素html定位。
【注意】
当position：absolute时，可以使用clip剪裁clip:rect(top right bottom left);
分别指当元素定位后，（元素不能动了）
详细
-
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
img{
position: fixed;
width: 40px;
bottom: 10px;
left: 10px;
}
小花
图像小花的设置，是相对于视窗本身，观察垂直滚动条已经在最下面了，小花依旧保持在最下面的位置。（IE6以前不兼容）
【z-index】
前提：position：absolute；position：fixed；（默认与relative不可以）
并且：设置完left、right、bottom、top
这样就可以使用z-index了，其默认是0，正值的话会在上面，负值的话会在下面。
#d3{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
width: 400px;
background: #FFFFA0;
}
效果
欢迎补充与指正哦☺
网友评论