定位

定位

  定位应该说在CSS中占据着举足轻重的位置，学好定位很重要，定位可以让盒子想去哪就去哪。

  定位分为四种，使用position设置定位模式，使用top,bottom,left,right设置定位的位置。

  第一种叫做static,也是系统默认的定位，这个没什么讲的，平时接触的都是这个。

相对定位

  第二个叫做相对定位,当设置position: relative;时，就是相对定位，为了理解相对定位，首先得看一个例子。

<div class="po"></div>

.po {
    margin: 100px;
    width: 200px;
    height: 200px;
    background-color: pink;
}

  现在我将盒子设置为相对定位，并且top和left都设置为100px,观察一下变化

position: relative;
top: 100px;
left: 100px;

  发现盒子相对于原来的位置向下移动了100px,向右移动了100px,也就是离原来位置的顶部(top)100px,离原来位置的左侧(left)100px。可见，相对定位是相对于自己原来的位置的定位。

  那么我们比较关心的一个问题就是，使用了定位之后，盒子是不是跟浮动一样不占据原来的位置了。其实使用相对定位还占据着原来的位置。我们再加入一个盒子,并且设置原来盒子的margin-bottom: 0px(一开始是100px)。

width: 200px;
height: 200px;
background-color: skyblue;

  由此可见，相对定位还保留着原来的位置。

绝对定位

  第三种定位是绝对定位，绝对定位是相对于最近使用定位的父级的定位，比如，如果父级使用定位，那么就是相对于父级的定位，如果没有，那么考虑"爷爷级"，以此类推，直至相对于body。

  我们假设有一个盒子，里面嵌套着一个小盒子，如下

<div class="father">
    <div class="son"></div>
</div>

* {
    margin: 0px;
    padding: 0px;  /*消除内外边距*/
}
.father {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 100px;
}
.son {
    width: 100px;
    height: 100px;
    background-color: blue;
}

  现在对小盒子使用绝对定位，设置top为0,left为0

position: absolute;
top: 0px;
left: 0px;

  因为它的父级盒子没有使用定位，所以小盒子是相对于body的定位，所以紧贴着网页的左上角。现在我们让大盒子使用相对定位，top和left都设置为0,即原地不动，但是添加了定位，这是小盒子应该是相对于大盒子的定位，所以应该紧贴着大盒子的左上角。

position: relative;
top: 0px;
left: 0px;

  那么绝对定位占据位置吗?我们在大盒子里再嵌套一个小盒子

<div class="father">
    <div class="son"></div>
    <div class="son2"></div>
</div>

.son2 {
    width: 100px;
    height: 150px;   /*比定位的小盒子长50px,防止全部被压住*/
    background-color: purple;
}

  如果绝对定位占据位置，那么第二个小盒子就不会被盖住了，所以绝对定位是不占据位置的。

固定定位

  最后一种就是固定定位，如果设置position: fixed就是固定定位。固定定位只相对于浏览器定位，与父级，自己都没有关系，所以在很多网页看到那种不管怎么拉，位置都固定的广告就是固定定位，如下

<div class="left"></div>
<div class="right"></div>

body {
    height: 3000px;  /*为了使屏幕能滑倒，以观察固定定位效果*/
}
.left, .right {
    width: 100px;
    height: 300px;
    background-color: pink;
    position: fixed;       /*固定定位*/
    top: 50%;
    margin-top: -150px;  /*这两行是为了让定位盒子垂直居中*/
}
.left {
    left: 0px;
}
.right {
    right: 0px;
}

  观察随着屏幕往下拉，这两个盒子位置固定，没有改变，这就是固定定位。