CSS positon 属性总结

最近在做页面被绝对定位和相对定位搞晕了，经过仔细查阅资料实践操作，总结了一些。共勉。

分析 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>

<div style="position:absolute;top:50px;left:100px;background:red;width:200px;height:100px;">

   <ul>

      <li>那就是发生地大多数</li>

      <li>变成用于按</li>

   </ul>

</div>

分析:第二个div使用了绝对定位,它最近的没有被包含的绝对/相对定位的元素,所以它的父对象就是整个浏览器.效果如下:

 

 

如果是这样:

<div style="background:blue;width:500px;height:50px;position:absolute;top:100px;">dddgdfg</div>

<div style="position:absolute;top:50px;left:100px;background:red;width:200px;height:100px;">

   <ul>

      <li>那就是发生地大多数</li>

      <li>变成用于按</li>

   </ul>

</div>

分析:他们虽然都使用了绝对定位,但他们属于同级元素,没有被包含的元素.所以两个div都是以浏览器做为父对象.他们各不影响. 效果如下:

 

如果是这样,有被包含的绝对/相对定位的元素,则根据它来移动.

 代码:

<div style="background:blue;width:500px;height:50px;position:absolute;top:100px;">dddgdfg

   <div style="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>

<div style="background:black;width:500px;height:100px;position:relative;top:50px;left:100px;color:#FFF;">

   <ul>

      <li>那就是发生地大多数</li>

      <li>变成用于按</li>

   </ul>

</div>

 

效果图:

 

如果两个div都有相对定位呢?

 代码: <div style="background:red;width:800px;height:100px;position:relative;top:30px;">dddgdfg</div>

<div style="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;">

   <div style="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;">加入收藏&nbsp;|&nbsp;联系我们

</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;">加入收藏&nbsp;|&nbsp;联系我们

</div>

</div>

效果图 跟上面的一样.

在用fixed 时,不用考虑父级元素,同级元素,只依据浏览器窗口定位.