原文地址：http://blog.sina.com.cn/s/blog_75dc55aa0100t57y.html
最近在做页面被绝对定位和相对定位搞晕了，经过仔细查阅资料实践操作，总结了一些。共勉。
分析 CSS Positon 属性:
1. 定义
Positon 规定元素的定位类型.
2. 值
1).absolute 绝对定位
2).relative 相对定位
3).fixed 固定定位
4).static 默认值,没有定位.
5).inherit 任何IE浏览器都不支持此属性值.
3.实例分析
1>.absolute
绝对定位的元素的偏移根据距离该元素最近在已定位（绝对定位或相对定位）的包含元素(父对象)在位置来计算。如果不存在该包含元素，就把浏览器窗口作为包含元素。
代码:
<div style="background:blue;width:500px;height:50px;">dddgdfg</div>
<divstyle="position:absolute;top:50px;left:100px;background:red;width:200px;height:100px;">
<ul>
<li>那就是发生地大多数</li>
<li>变成用于按</li>
</ul>
</div>
分析:第二个div使用了绝对定位,它最近的没有被包含的绝对/相对定位的元素,所以它的父对象就是整个浏览器.效果如下:
如果是这样:
<divstyle="background:blue;width:500px;height:50px;position:absolute;top:100px;">dddgdfg</div>
<divstyle="position:absolute;top:50px;left:100px;background:red;width:200px;height:100px;">
<ul>
<li>那就是发生地大多数</li>
<li>变成用于按</li>
</ul>
</div>
分析:他们虽然都使用了绝对定位,但他们属于同级元素,没有被包含的元素.所以两个div都是以浏览器做为父对象.他们各不影响. 效果如下:
如果是这样,有被包含的绝对/相对定位的元素,则根据它来移动.
代码:
<divstyle="background:blue;width:500px;height:50px;position:absolute;top:100px;">dddgdfg
<divstyle="position:absolute;top:50px;left:100px;background:red;width:200px;height:100px;">
<ul>
<li>那就是发生地大多数</li>
<li>变成用于按</li>
</ul>
</div>
</div>
效果图:
2>.relative
两点:a.元素以它原来占据的空间相对移动 。
b. 该元素移动不会影响其他元素位置。
代码:
<div style="background:red;width:800px;height:100px;">dddgdfg</div>
<divstyle="background:black;width:500px;height:100px;position:relative;top:50px;left:100px;color:#FFF;">
<ul>
<li>那就是发生地大多数</li>
<li>变成用于按</li>
</ul>
</div>
效果图:
如果两个div 都有相对定位呢?
代码: <divstyle="background:red;width:800px;height:100px;position:relative;top:30px;">dddgdfg</div>
<divstyle="background:black;width:500px;height:100px;position:relative;top:50px;left:100px;color:#FFF;">
<ul>
<li>那就是发生地大多数</li>
<li>变成用于按</li>
</ul>
</div>
效果图:
分析:第二个div 没动.两个div互不影响.
如果两个div 都有相对定位,并且其中一个被包含,会怎样呢
<div style="background:red;width:800px;height:100px;position:relative;top:30px;">
<divstyle="background:black;width:500px;height:100px;position:relative;top:50px;color:#FFF;">
<ul>
<li>那就是发生地大多数</li>
<li>变成用于按</li>
</ul>
</div>
</div>
效果图:
3>.fixed
固定定位:相对于浏览器窗口进行定位.
分析代码:
<div style="background:#106ea2;position:fixed;top:20px;left:50px;color:#FFF;">logo说到底
</div>
<div style="background:#3c3c3c;color:#FFF;position:fixed;top:20px;right:50px;">加入收藏 | 联系我们
</div>
效果图:
如果被包含时,会怎么样呢
<div style="background:#106ea2;position:fixed;top:20px;left:50px;color:#FFF;">logo说到底
<div style="background:#3c3c3c;color:#FFF;position:fixed;top:20px;right:50px;">加入收藏 | 联系我们
</div>
</div>
效果图 跟上面的一样.
在用fixed 时,不用考虑父级元素,同级元素,只依据浏览器窗口定位.
浙公网安备 33010602011771号