Html position(static | absolute | fixed | relative)定位
来源:互联网 发布:马甲线软件 编辑:程序博客网 时间:2024/04/30 07:06
语法:
position : static | absolute | fixed | relative
参数:
static : 无特殊定位,对象遵循HTML定位默认规则
absolute : 绝对定位。将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。相对于position属性非static值的最近父级元素进行偏移,如果父级都是static(文档流),则相对整个文档进行偏移。偏移后,原来的空间会被其他元素挤占
relative : 相对定位。对象不能想绝对定位一样层叠,但可依据left,right,top,bottom等属性在正常文档流中相对原先对象的位置进行偏移。原先的位置会被其他元素挤占。
fixed : IE5.5及NS6尚不支持此属性 。可以使元素在屏幕上保持固定,下拉滚动条,位置也不改变
知识点说明:
(1)文档流是文档中可显示对象在排列时所占用的位置,浏览器解析html时,会按从上到下的顺序,把元素放到相应位置。如div,p占用文档流,他们本身是块级元素(块级元素无论width是否占满网页宽度,都会占用一行),在文档流则从上到下分行显示div和p。
示例1:
<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:
<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:
<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>
<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:
为了显示方便,先放点东西占位吧。</br> 为了显示方便,先放点东西占位吧。</br> 为了显示方便,先放点东西占位吧。大概占了60px了吧</br> <div style="width:300px;height:100px;border:1px solid red;">我是div标签,默认static,未进行定位</div>
示例6、
<div style="width:300px;height:100px;border:1px solid red;position:relative;top:100px">我是div标签,相对定位,根据初始位置向下偏移100px</div>
(3)原先位置是否会被其他元素占用:
绝对或相对定位后,原先的位置会被其他元素占用,如示例2
(4)是否 能通过z-index层叠:
绝对定位的层可以层叠。
示例7、
<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"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- Html position(static | absolute | fixed | relative)定位
- Html position(static | absolute | fixed | relative)定位
- Html position(static | absolute | fixed | relative)定位
- Html position(static | absolute | fixed | relative)定位
- Html position(static | absolute | fixed | relative)定位
- Html position(static、relative、absolute、fixed)
- Html position(static、relative、absolute、fixed)
- CSS-position:static/relative/absolute/fixed定位
- css定位(position:relative,absolute,static,fixed)与定位应用
- Position(Static, Absolute, Relative, Fixed)
- position:static|absolute|fixed|relative
- position:static | relative | absolute | fixed
- CSS定位问题--position--static\absolute\relative\fixed
- 定位:static、fixed、relative、absolute
- css中position属性(absolute/relative/static/fixed)
- CSS中position属性 (absolute,relative,static,fixed)
- position 的 static、relative、absolute、fixed、inherit
- position 的 static、relative、absolute、fixed、inherit
- 流行浏览器内核分类及样式区别
- 几个ZigBee协议栈和操作系统
- gitosis/git服务器搭建
- hdu 1575
- Floyd算法
- Html position(static | absolute | fixed | relative)定位
- java处理XML三种解析方式比较
- Android 系统相机的调用以及获取图片
- Uva 11374 - Airport Express 最短路
- 【拆了CSS照样是页面】之——HTML语义化(含H5)
- The Broken Window Theory
- 浅谈字符编码
- HDU2072:单词数
- Linux下安装jboss并设置自启动服务