Html position(static | absolute | fixed | relative)定位

空扰寡人 提交于 2020-03-27 08:07:31

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

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

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


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>

 

image

而如果想让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>

 

 

image

这时候我们可以看出,绝对定位后,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>

 

image

大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>

 

image

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

示例5:

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

 

image

示例6、

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

 

image

(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>

 

image

 

示例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>

 

image

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!