Html position（static | absolute | fixed | relative）定位

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

语法：
position : static | absolute | fixed | relative

 

参数：
static : 无特殊定位，对象遵循HTML定位默认规则
absolute : 绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移。偏移后，原来的空间会被其他元素挤占
relative : 相对定位。对象不能想绝对定位一样层叠，但可依据left，right，top，bottom等属性在正常文档流中相对原先对象的位置进行偏移。原先的位置会被其他元素挤占。

                                                                                                       

positon	名称	(1)是否将对象脱离文档流	(2)偏移参照对象	偏移属性	(3)原先位置是否会被其他元素占用	(4)是否 能通过z-index层叠
absolute	绝对定位	是	相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移（即body左上角坐标原点）	left，right，top，bottom	是	是
relative	相对定位	否	参照自身初始位置进行偏移	left，right，top，bottom	是	否

fixed : IE5.5及NS6尚不支持此属性 。可以使元素在屏幕上保持固定，下拉滚动条，位置也不改变

 

知识点说明：

 

(1)文档流是文档中可显示对象在排列时所占用的位置，浏览器解析html时，会按从上到下的顺序，把元素放到相应位置。如div，p占用文档流，他们本身是块级元素（块级元素无论width是否占满网页宽度，都会占用一行），在文档流则从上到下分行显示div和p。

 

示例1：

 

  View Code   

   

<div style="width:300px;height:100px;border:1px solid red">我是div标签</div> <p style="width:300px;height:100px;border:1px solid red">我是p标签</p>

  

 

 

 

 

 

而如果想让div位置脱离文档流偏移，让解析时，把div脱离文档流，相对左上角原点向右偏移400px，把p放到文档流中，占用div本来的位置，则可以用绝对定位。

 

示例2：

 

  View Code   

   

<div style="width:300px;height:100px;border:1px solid red;position:absolute;left:400px">我是div标签</div>     <p style="width:300px;height:100px;border:1px solid red">我是p标签</p>

  

 

 

 

 

 

 

 

这时候我们可以看出，绝对定位后，div偏离了文档流，不再是从上到下显示，而是把div偏移，p标签占用本来的文档流位置。

 

(2)偏移参照对象:

 

absolute绝对定位的偏移参照物是最近的position非static的父标签。

 

示例3：

 

  View Code   

   

<div style="width:900px;height:100px;border:1px solid black;position:absolute;left:100px">我是大div，我根据body向右偏移100px，小div要根据我的左上角原点偏移         <div style="width:300px;height:100px;border:1px solid red;position:absolute;left:400px">我是div标签</div>         <p style="width:300px;height:100px;border:1px solid red">我是p标签</p>     </div>

  

 

 

 

 

 

大divposition非static（默认是static），可以是absolute，relative，小div都会参照大div定位。

 

示例4：

 

如果父标签都是static，则再向上一级找非static的父标签，直到找到body。如果父级都是static（文档流），则相对整个文档进行偏移（即body左上角坐标原点）

 

为了显示方便，先放点东东占位吧</br>
    为了显示方便，先放点东东占位吧</br>
    为了显示方便，先放点东东占位吧，大概占了60px了吧</br>
   

 

  View Code   

   

 <div style="width:900px;height:100px;border:1px solid black;">我是大div，但我是static，只好让小div根据body定位了         <div style="width:300px;height:100px;border:1px solid red;position:absolute;top:100px;">我是div标签，根据body，向下偏移100px；</div>     </div>

  

 

 

 

 

 

relative相对定位的参照对象是自己的初始位置。

 

示例5：

 

  View Code   

   

为了显示方便，先放点东西占位吧。</br>         为了显示方便，先放点东西占位吧。</br>         为了显示方便，先放点东西占位吧。大概占了60px了吧</br>         <div style="width:300px;height:100px;border:1px solid red;">我是div标签，默认static，未进行定位</div>

  

 

 

 

 

 

示例6、

 

  View Code   

   

<div style="width:300px;height:100px;border:1px solid red;position:relative;top:100px">我是div标签，相对定位，根据初始位置向下偏移100px</div>

  

 

 

 

 

 

(3)原先位置是否会被其他元素占用:

 

绝对或相对定位后，原先的位置会被其他元素占用，如示例2

 

(4)是否 能通过z-index层叠:

 

绝对定位的层可以层叠。

 

示例7、

 

  View Code   

   

<div style="width:300px;height:100px;background:red;position:absolute;">我是div1，绝对定位，没有设置z-index,虽然高度和div2一样的，但div2会把我覆盖</div>    <div style="width:300px;height:100px;position:absolute;top:50px;background:yellow">我是div2，绝对定位，我能把div2覆盖</div>

  

 

 

 

 

 

 

 

示例8、

 

  

<div style="width:300px;height:100px;background:red;position:absolute;z-index:2">我是div1，我的z-index比div2高，所以把div2覆盖</div>     <div style="width:300px;height:100px;position:absolute;top:50px;background:yellow">我是div2，我的z-index是默认值，比div1低</div>

 

 

 

 

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow