css position属性

position属性干嘛的？

定位的。绝对定位，相对定位

如何定位？

举个例子

<style type="text/css">
h2.pos_abs
{
background: yellow;
position:absolute;
left:100px;
top:100px;
}
</style>

这个结果如下。可以看到距离左侧，上侧各100px。相对于浏览器页面。上述三个参数position，left，top的位置无关紧要。

image.png

在线查看
W3School在线测试工具 V2

绝对定位适合不规律布局

image.png

绝对定位相对于其父元素进行定位.

真的绝对定位就相当于是有绝对坐标系了，而事实上并没有绝对坐标系，除非人为规定一个。
对于某一元素而言，是相对于其父元素进行绝对定位的。比如

<style> 
.divcss5{ position:relative;width:400px;height:200px; 
border:1px solid #000} 
/* 定义父级position:relative 为就认为是绝对定位声明吧 */ 
.divcss5-a{ position:absolute;width:100px;height:100px; 
left:10px;top:10px;background:#000} 
/* 使用绝对定位position:absolute样式 并且使用left top进行定位位置 */ 
.divcss5-b{ position:absolute;width:50px;height:50px; 
right:15px;bottom:13px;background:#00F} 
/* 使用绝对定位position:absolute样式 并且使用right bottom进行定位位置 */ 
</style> 
<div class="divcss5"> 
    <div class="divcss5-a"></div> 
    <div class="divcss5-b"></div> 
</div>

结果，图中的1和2都是相对于<div class="divcss5"> 来定位的。

image.png

CSS position绝对定位absolute relative - DIVCSS5
把上述例子中的第二个relative改成static（或者干脆不要）会是什么结果？

<style> 
.divcss5{ position:relative;width:400px;height:200px; 
border:1px solid #000} 
/* 定义父级position:relative 为就认为是绝对定位声明吧 */ 
.divcss5-a{ position:absolute;width:100px;height:100px; 
left:10px;top:10px;background:#000} 
.divcss5-b{ position:static;width:50px;height:50px; 
right:15px;bottom:13px;background:#00F} 
</style> 
<div class="divcss5"> 
    <div class="divcss5-a"></div> 
    <div class="divcss5-b"></div> 
</div>

结果如图。先是1区域以及其父元素进行定位。那么2呢？2是依据谁定位的呢？2区域依据浏览器

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

image.png

也就是说改成staic以后，就走正常的流了。由于1区域定位留下了空间嘛。正常后面的元素就会补上。所以2就是那么个位置。

再次进行修改，把最后一个absolute改成relative

<style> 
.divcss5{ position:relative;width:400px;height:200px; 
border:1px solid #000} 
/* 定义父级position:relative 为就认为是绝对定位声明吧 */ 
.divcss5-a{ position:absolute;width:100px;height:100px; 
left:10px;top:10px;background:#000} 
.divcss5-b{ position:relative;width:50px;height:50px; 
right:15px;bottom:13px;background:#00F} 
</style> 
<div class="divcss5"> 
    <div class="divcss5-a"></div> 
    <div class="divcss5-b"></div> 
</div>

结果如下。看起来2区域已经跑出狂歪了。因为2区域相对于正常的文档流向左和向上移动了xx px。

image.png

没有父元素如何定位？

相对于浏览器左上角进行定位。

fixed定位才是真正的绝对定位

（这里起了个名字叫固定定位）
把上述代码的relative用fixed代替，查看结果。这就是任何时候都是相对于浏览器窗口进行的定位。

<style> 
.divcss5{ position:relative;width:400px;height:200px; 
border:1px solid #000} 
/* 定义父级position:relative 为就认为是绝对定位声明吧 */ 
.divcss5-a{ position:fixed;width:100px;height:100px; 
left:10px;top:10px;background:#000} 
.divcss5-b{ position:fixed;width:50px;height:50px; 
right:15px;bottom:13px;background:#00F} 
</style> 
<div class="divcss5"> 
    <div class="divcss5-a"></div> 
    <div class="divcss5-b"></div> 
</div>

image.png

这里的命名不太好，绝对定位应该改名叫相对父元素定位，而fixed应该叫相对浏览器定位

relative定位又是相对谁？

把上面的absolute又都改成relative。其他不变。看看结果

<style> 
.divcss5{ position:relative;width:400px;height:200px; 
border:1px solid #000} 
/* 定义父级position:relative 为就认为是绝对定位声明吧 */ 
.divcss5-a{ position:relative;width:100px;height:100px; 
left:10px;top:10px;background:#000} 
.divcss5-b{ position:relative;width:50px;height:50px; 
right:15px;bottom:13px;background:#00F} 
</style> 
<div class="divcss5"> 
    <div class="divcss5-a"></div> 
    <div class="divcss5-b"></div> 
</div>

relative是这么说的

生成相对定位的元素，相对于其正常位置进行定位。

那么问题来了，啥叫正常位置？
理解正常位置要理解文档流。文档流就是各种定位方法都不要，该换行换行诸如此类。

image.png

relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

总结

记住两点
1.absolute定位脱离正常文档流，relative并不脱离正常文档流，而且相对于正常文档流进行定位。
2.问题的关键在于理解什么是正常文档流。

参考

CSS Position 定位属性 - polk6 - 博客园
 Position属性四个值：static、fixed、absolute和relative的区别和用法 - Newbie_小白 - 博客园

css position属性