您的位置：首页 > Web前端 > CSS

css代码中position的定位,baidu+总结

2011-10-06 09:23 459 查看

用Div+CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。
Position属性有四个值：static、fixed、absolute和relative，

后面两个在布局中的定位里是经常用到的，顾名思义，

absolute是指绝对定位，即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。

ralative是指相对定位，就是依据left，right，top，bottom等属性在正常文档流中偏移位置。

怎么个绝对法，又怎么个相对法呢？

今天我特意测试了一下，得出了以下结论：

1、当Position属性值为Relative时对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时，只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时，只有left起作用。

2、当Position属性值为absolute时对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。

在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。

定位属性(position:relative|absolute|static|fixed)
<html>
<head>
<title>定位属性</title>
</head>
<body>
<br/>
<span style="position:static; background-color:red;">static没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级,位置设定无效。</span>
<div style="position:relative; top:100px; left:30px; width:800px; background-color:gray;">relative不脱离文档流，参考自身静态位置，通过top,bottom,left,right定位，并且可以通过z-index
进行层次分级(相对于应该出现的位置)。
</div>
<div style="position:absolute; top:100px; left:30px; width:800px; background-color:green;">absolute脱离文档流，通过top,bottom,left,right定位。
选取其最近的父级定位元素，当父级position为static时，absolute
元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
</div>

<img style="position:fixed;" src="1.jpg"/>
<br/>
fixed固定定位，这里他所固定的对象是可视窗口而非是body或是父级元素。可通过z-index
进行层次分级。(相对于应该出现的位置)

<br/>
<div style="position:relative; height:150px; background-color:red;">
al;skdjfl;askdjfl;askdfj
<span style="position:relative; top:10px; width:50px; height:150px; background-color:yellow;">
al;skdjf;laksdjfl;aksdf
</span>
</div>
<b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />
<b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />
<b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />
<b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />
<b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />
<b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />        <b>sdfdfdf</b><br />

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航