浅谈css position属性

标签：sharp   height   add   dex   index   它的   页面   sha   position   

　　今天来谈一下css的position属性，刚学的时候对定位还是有点不太了解，看了很多视频和文档，但是还是没有真正的了解，要做到真正的了解，还是需要多去实现。

　　简单的来说，position就5个属性，在网页布局中中会经常使用到，怎么单个用，怎么搭配起来用，能够用的好的人我相信并不多。

　　那它一共就static | relative | absolute | static | fixed | inherit五大熟悉，但是后面的3个属性就用的比较少，现在来讲讲他们的特点。

　　我显示分别测试了将一个盒子先后设置了relative，absolute,fixed属性，分别left:200px; top:200px;从页面上看设置3个属性盒子的距离偏移都是一样的没有什么变化，但是仔细一看还是有变化的，一个盒子在浏览器中是有默认Padding的，所以会发现设置relative的盒子是从默认的padding值那里偏移的，也就是自身偏移，但是设置absolute和fixed却是从最边上偏移的，。

　　在来说说在给父元素设置absolute,子元素设置relative的情况；

.wang{
        background: pink;
        height: 1000px;
        position: absolute;
        top:100px;
        left: 100px;


      }
      .xiang{
        position: relative;
        width: 300px;
        height: 300px;
        background: #ccc;
        top:0px;
        left: 0px;

      }

需要注意的是粉红色的父级我并没有设置宽度，而它的宽度却是默认和子级一样宽的。而子元素是相对于父元素定位的。

当父级元素和子级元素同时设置relative属性的时候，此时没有设置宽的父级元素为100%,同样的子级也是相对于父级定位的。

当父级用relative的时候，子级用absolute，此时子元素也是相对于父元素定位的。

当父级和子级同时设置absolute属性的时候，此时必须得设置父元素的宽和高，当然不设宽高，还是可以看出来，子元素还是以父元素定位的，得出的结论就是无论父级position设置什么属性，子级position设置什么属性，子级都是以父级定位的，。不过一般情况下都是将父级设置成relative,子级设置成absolute.

另外还有一个fixed属性也用的比较多，一般在页面上固定 不动的元素会用到它。

还有一点需要注意的是子元素一定是以离它最近的设置了父级包含块的元素定位。

说到了position，就一定要说说它的好朋友z-index,这个东西我特别喜欢它，它想让谁在上谁就在上。

img{
        width: 300px;
        height: 200px;
        position: absolute;
        left: 0;
        top:0;
        z-index: -1;
      }



<h2>你在做什么</h2>
<img src="images/50.jpg" >
<p>你现在在做什么，我在等你呀</p>

　　这样将图片的z-index值设为-1，字就压在了图片上了，要不字是看不见的，。

　　还有一点需要注意的是设置z-index的元素必须得设置position属性才行。

　　最后，再次爆照，华山饥寒交迫的夜晚

浅谈css position属性

标签：sharp   height   add   dex   index   它的   页面   sha   position   

原文地址：http://www.cnblogs.com/hopeelephant/p/5990706.html