CSS中的定位

定位

CSS三种布局机制之一，利用定位可以更方便的实现某些由浮动和标准流不容易实现的效果，比如让元素移动到指定位置

静态定位

position：static；

元素默认的定位就是这个，不能设置偏移，所以是无法用来实现定位布局的

相对定位

position：relative；

配合left：，top：，right：，bottom：属性使用，当然元素偏移是要有一个相对的位置的，就像我们以前学习物理时使用的参照物一样，相对定位的参照物就是他在标准流中的位置，就是它未移动之前的位置。
需要注意的是，相对定位的元素不管怎么移动，对页面上的其他元素是没有影响的，形象点讲就是不会“挤开”其他元素，因为它并没有脱标，它在标准流中的位置依旧保持。

绝对定位

position：absolute；

不同于相对定位，绝对定位的移动参照物是沿着父级往上找，直到找到一个定位的父元素，就以它为参照物，如果找不到就以浏览器文档作为参照。

举个例

 .grandfather {
width: 300px;
height: 400px;
/* background-color:gray; */
margin-left: 300px;
position: relative;
border: 1px solid #000;

  }
  .father{
    width: 200px;
    height: 200px;
    margin-top: 10px;
    background-color:sandybrown;

  }
  .son {
    width: 100px;
    height: 100px;
    background-color:rosybrown;
    position: absolute;
    left: 50px;
    top: 0;
    
  
  }
</style>

我们设置了祖父元素为相对定位，子元素为绝对定位，移动是就会参照祖父元素来移动，效果就为

固定定位

position：fixed；

固定定位和绝对定位一样，会脱离标准流，但是参照物不同。固定定位是以浏览器窗口为参照的，且不会随着滚动条的滚动而移动。所以我们常常用来做一些广告效果，贴在版心板块旁边。

注：还有一些小tips，比如left和right，top和bottom这中相对的属性不要混在一起用，非要用的话，谁在前面就听谁的。

z-index

z-index属性，可以用来决定堆叠顺序，值为正数。

运用场合：定位布局时，可能会出现盒子堆叠的情况，此时就可以利用z-index属性来决定谁在上面，谁的值越高，谁就在上面。·