【CSS】【11】CSS盒子的定位

在CSS中有一个非常重要的属性Position，然而要使用CSS进行定位操作，并不仅仅通过这个属性来实现，二者不要混淆。先看一段代码：

一、relative演示

HTML部分代码：

<div class="father">
     <div class="son">Box-1</div>
</div>

CSS部分代码：

.father
{
    background-color:#669999;
    border:1px dashed #000000;
    padding:10px;
}
.son
{
    background-color:#CCCC00;
    border:1px dashed #000000;
    padding:10px;
}

页面效果：

   从CSS上看没有对盒子设置任何浮动属性和定位属性，所以页面展示效果就是标准流下的嵌套效果。这种效果其实就是position属性的默认值static的效果，static即为盒子position属性的默认值，它表示盒子在标准流或浮动方式下的布局。

修改.son代码：

.son
{
    background-color:#CCCC00;
    border:1px dashed #000000;
    padding:10px;
    position:relative;
    left:30px;
    top:30px;
}

页面效果：

   这里设置Box-1相对于它原来位置向左和向下偏移了各30像素，而不是相对于父div边框，即效果图中标出的白色双向箭头的距离，这点十分重要。所以relative常以标准的排版方式为基础，然后使盒子相对于它在原来的标准位置偏移指定的距离。为了解释清楚这件事，请看下图：

   在这个图中，三个盒子均设置了浮动方式，由于对Box-2指定了position为relative，然后相对于它自己原来的位置向右下各偏移30像素，所以产生了此效果，但在Box-3的眼中Box-2还在它原来的位置，而不是相对移动之后的位置。

二、absolute演示

HTML部分代码：

<div class="father">
  <div>Box-1</div>
  <div class="son">Box-2</div>
  <div>Box-3</div>
</div>

CSS部分代码：

.father
{
    background-color:#669999;
    border:1px dashed #000000;
    padding:10px;
}
.father div
{
    background-color:#CCCC00;
    border:1px dashed #000000;
    padding:10px;
}

页面效果：

增加CSS代码：

.son
{
   position:absolute;
   top:0px;
   right:0px;
}

页面效果：

此时Box-2脱离了标准流，跑到了浏览器的右上角，那么约对定位absolute就意味着相对于浏览器的定位呢？答案是NO。我们修改father的代码，增加一个定位属性，但大小和位置不变：

.father
{
    background-color:#669999;
    border:1px dashed #000000;
    padding:10px;
position:relative;
}

再看页面效果：

   此时会发现Box-2这次跑到了父div的右上角？这是为什么呢？它是以它的包含框为基准，查看的父亲是否有设置定位属性，若父亲有定位属性则以父亲为参考进行移动，若父亲没有设置定位属性就去查看它的爷爷，依次类推，若所有的祖先均没有设置定位属性，则以浏览器为参考进行移动。

   再强调一下对一个div设置为绝对定位，（1）它会脱离原来的标准流，其他的兄弟盒子则无视它的存在（2）以它的包含框为基准去查看父类是否有定位属性，以有定位属性的祖先为参考进行移动，若祖先均无定位属性则以浏览器为参考进行移动。

三、Fixed演示

HTML部分代码：

<div class="father">
  <div>Box-1</div>
  <div class="son">Box-2</div>
  <div>Box-3</div>
</div>

CSS部分代码：

.father
{
    background-color:#669999;
    border:1px dashed #000000;
    padding:10px;
}
.father div
{
    background-color:#CCCC00;
    border:1px dashed #000000;
    padding:10px;
}
.son
{
position:fixed;
    top:0px;
    right:0px;
}

页面效果：

   此时故意把浏览器窗口拖的这样小，然后向下拉动右侧滚动条，发现Box-2始终在浏览器的右上角，所以Fixed表示固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位。

   大家浏览网页时，常比较讨厌的广告始终占据网页的右侧，去也去不掉，其定位就是如此。