有关CSS定位的内容是position : relative absolute静态固定。 静态没有特殊设置，根据基本定位规定，不能用z-index进行分层。 在正文流中，每个元素的位置都受到文本流的限制，但CSS现在允许这些元素改变自己的位置。 可以通过浮动使元素浮动，也可以通过边距移动元素的位置。
中文名称
CSS定位
类型
系统定位原理
可位移元件
网域
电脑
CSS位置定义CSS位置：
编辑
语音
relative不脱离文档流，可以通过参考其静态位置来定位(顶部(top )、底部(bottom )、左侧(left )、右侧(right ) )，并且通过z-index进行分层。
absolute脱离文件流程，用top、bottom、left、right确定位置。 选择最近的父锚点元素。 如果父位置为静态，则absolute元素在主体坐标的原点处定位，并且可以在z索引中分层。
固定了位置。 其中，他固定的对象更像是可视窗口，而不是主体或父元素。 可以用z-index进行层次划分。
CSS中定位的层叠级别： z-index :自动| namber；
自动跟随父对象的定位
namber有一个没有单位的整数值。 可以是负数
CSS定位CSS定位的应用及注意事项
编辑
语音
[1]
答：将“相对位置”(position: relative )元素定位到相对位置时，它将显示在该位置。 然后，通过设置垂直(或水平)位置(top、right、bottom和left四个值)，可以相对于其起点移动此元素)。 注：设置为相对位置的元素框将偏移一定的距离。 元素保持未放置状态，保留原来占用的空间。
[2]
(b )绝对位置) position: absolute )绝对位置不占用空间，因为元素的位置不依赖于文档的流动。 与相对位置不同，相对位置实际上被视为常规流位置模型的一部分。 这是因为元素的位置相对于其在正常流中的位置。 注：设置为“绝对位置”的元素框将从文档流中永久删除，并相对于包含块放置。 包含块可以是文档中的另一个元素，也可以首先是包含块。 元素在常规文档流中所占的空间将被关闭，就像元素原本不存在一样。 放置元素后，将生成块级框，无论在正常流程中生成的框类型如何。
CSS位置CSS位置原理：
编辑
语音
可以位移的要素(相对位置) ) ) ) ) ) ) ) ) )。
但实际上那不是真正的位移。 为什么这么说呢，因为那只是通过增大margin值实现的盲法。 真正意义上的位移是top、right、bottom、left (以下称为TRBL、TRBL )。 为相对放置的元素生成。
在概要图中，宽200px、高50px、margin :25 px border :25 px solid # 333； padding:25px； 在相对位置的元素中，偏移距离为上限50px，左边50px。 下面是默认的黑色块。 可以看到，文本流中的这个块的一部分被上面的相对位置隐藏了。 这表示“当元素设置为相对或绝对位置时，将自动生成堆栈，堆栈级别自然高于文本流”。 除非z-index值设置为负值，否则在Firefox等浏览器中z-index为负值时不会显示。 并且，在相对定位要素位移后，表现内容已经离开文本流，但文本流中由于原来的相对定位而保留了原来的总宽度和总高度(内容的高度或宽度加上marginborderpadding的值) 这表明，在相对位置中，表示区域远离原始文本流，但文本流中有这个相对位置的老巢。 请特别注意这一点，因为在实际应用中，如果相对定位的位移值过大，则在原区域会出现空白。
另外，请注意，锚点元素的坐标点是margin值的左上角边缘点，即示意图中的b点。 那么，所有位移的计算都是基于这一点进行要素的推进。 TRBL为正值时，位移的方向凝聚。 由此可知，TRBL为负值时，位移的方向向外。 图像内具有偏移的箭头指向标记，加号为正偏移方向，减号为负偏移方向。 关于位移方位，可以延长总飞的《由浅入深漫谈margin属性(一)》进行读取
任意位置的元素(绝对位置) ) )。
如上所述，相对位置只能在文本流中进行位置的上下左右的移动，同样有限制。 虽然他的表现领域远离文本流，但在文本流中仍然为此保留了位置。 这就像打工的人出国了，但老家依然有他专用的位置，这个位置不会随着他的移动而改变。 但是，这样明显会有空白，所以如果文本流想舍弃这个部分的话就需要绝对的定位。 绝对位置不仅不会脱离文本流，也不会在文本流中为此绝对位置元素留下唯一的空格。 这就像工厂的职位，一个工人去了当然会有另一个工人来填补这个位置。 移动的部分也自然成为自由体
。绝对定位将可以通过TRBL来设置元素，使之处在任何一个位置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。看图1：图1
由图1可知，文本流中的内容会顶替绝对定位元素的位置，一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，因为那里是他们的被绝对定位后的坐标原点。
被关联的绝对定位
上面说的是单一的绝对定位，而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固定在网页中的某一个点，当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动，而并且是因定在网页的某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为坐标起始点。
虽然是如此，但是这个坐标原点却并不是父级的坐标原点，这是一个很奇怪的坐标位置。我们看一下模型图示(图2)：
图2
我们看到，图2中父级为黑灰色区块，子级为青色区块。父级是相对定位，子级是绝对定位。子级设置了顶部位移50个像素，左倾位移50个像素。那么我们看，子级的坐标原点并不是从父级的坐标原点位移50个像素，而是从父级块的padding左上边缘点为坐标起始点(即A点)。而父级这里如果要产生位置移动，或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。
这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话，相信看完对这里对定位的解释一定可以把定位使用得随心所欲。
CSS定位总在视线里的元素 (固定定位)
编辑
语音
由于广告的滥用，使得一些浏览器软件都开始有了广告内容拦截，使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。
虽然原来的浏览器并不支持过个属性，但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSS HACK来让IE6都可以实现这样的效果(目前无法使IE5.x)实现这种效果。
CSS元素绝对定位、相对定位 布局和浮动等
1. position:static|无定位
position:static是所有元素定位的默认值, 一般不用注明，除非有需要取消继承的别的定位
example:#div-1 {
position:static;
}
2. position:relative|相对定位
使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。
如果要让div-1层向下移动20px,左移40px:
example:#div-1 {
position:relative;
top:20px;
left:40px;
}
如果用到相对定位，紧随他的层divafter是不会出现在div-1的下方，而是和div-1在同一个高度出现。
可见， position:relative;并不是很好用。
3. position:absolute|绝对定位
使用position:absolute;,能够很准确的将元素移动到你想要的位置，
让我将 div-1a 移动到页面的右上角:
example:#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
使用绝对定位的div-1a层前面的或者后面的层会认为这个层并不存在，丝毫不影响到他们。所以position:absolute;用于将一个元素放到固定的位置很好用，但是如果需要div-1a层相对于附近的层来确定位置就不要实现了。
*这里有个Win IE的bug需要提到，就是如果为绝对定位的元素定义一个相对的宽度，那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。
4. position:relative + position:absolute|绝对定位+相对定位
如果给父元素(div-1)定义为position:relative;子元素(div-1a)定义为position:absolute，那么子元素(div-1a)的位置将相对于父元素(div-1)，而不是整个页面。
让div-1a定位于div-1的右上角：
example:
this is div-1a element.
this is div-1 element.
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
5. two column layout|两列布局
让我们实践position:relative + position:absolute的理论，实现两列布局。
example:
this is the column-one this is the column-two#div-1 {
position:relative;/*父元素相对定位*/
}
#div-1a {
position:absolute;/*子元素绝对定位*/
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;/*子元素绝对定位*/
top:0;
left:0;
width:200px;
}
注意，在这个例子中会发现父元素的高度不会随着子元素的高度变化，所以如果父元素的背景和边框需要定义一个足够高的高度才能显示出来。
6.float|浮动对齐
使用float定位一个元素有float:left;&float:right;两种值。这种定位只能在水平坐标定位，不能在垂直坐标定位。而且让下面的元素浮动环绕在它的左边或者右边。#div-1a {
float:left;
width:200px;
}
7.make two clumn with float|浮动实现两列布局
如果让一个元素float:left;另一个float:right;控制好他们的宽度，就能实现两列的布局效果。
example:#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
8.clear float|清除浮动
如果你不想让使用了float元素的下面的元素浮动环绕在它的周围，那么你就使用clear,clear有三个值，clear:left;(清除左浮动)，clear:right;(清除右浮动)，clear:both;(清除所有浮动)。
example:
this is div-1a this is div-1b this is div-1c#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
至此，这个css的定位部分就结束了，你可以动手体会体会加深印象。
词条图册
更多图册
参考资料
1.
详解CSS定位的应用及注意事项
．CSS定位[引用日期2012-12-12]
2.
详解CSS定位的应用及注意事项
．CSS定位[引用日期2012-12-16]