Web前端的知识之旅哟——定位与层模型

层模型

css中元素的层次模型主要是由position这个属性来决定的。

position属性：position的意思是定位，同样这个属性的作用就是给元素施加定位。它一共有四个值，分别是static、absolute、relative、fixed。

static

• static是默认的属性，当我们没有写position属性的时候，元素默认的定位就是static定位。

absolute

• absolute是绝对定位的意思，它会使元素脱离本来的位置再进行定位，它会使元素像立交桥一样出现空间上的分层，当元素脱离原来的位置之后，其他的元素就会看不到这个元素。同时，absolute也可以触发bfc。

• 同时，当我们改变定位之后，这个元素就有四个属性可以使用了，分别是left、right、top、bottom。这四个属性分别可以设置当前元素距离左边、右边、上边和下边的距离为多少，但是四个属性很少一起出现，一般都是两两一对出现，其中left和top是一对，right和bottom是一对。

div {
 
      width: 100px;
 
      height:100px;
 
      position: absolute;
 
      left: 100px;
 
      top: 100px;
 
}

CSS

这个div就会脱离原来的位置，然后距离浏览器上边框和左边框分别100px的距离。

• 最后一点，absolute的参照物是距离它最近的有定位（除了static）的父级，当每一个父级都没有定位的时候，元素会相对于浏览器边框进行定位。

relative

• relative是相对定位的意思，它会让元素保留原来的位置再进行定位，后面的元素可以看到它本来的位置。

• 当position改成relative之后，left、top、right、bottom进行的定位就会变成相对于自身的位置进行移动了。

• relative的参照物是元素自身。

• 当我们仅仅给元素设置position:relative;并没有设置left、right、top、bottom属性的时候，元素的定位是没有发生任何改变的，因为这个特性，一般在开发中，relative都是用作设置参照物的，一个absolute元素要相对于那个元素进行移动，就给那个元素设置relative的定位就可以了。

我们通过例子来看一下absolute和relative的区别。

我们现在有这样一个结构：

<div class=”wrapper”>

      <div class=”box”>

            <div class=”content”></div>

      </div>

</div>

.wrapper { 
      width: 200px;
      height: 200px;
      background-color: orange;
      margin-top: 100px;
      margin-left: 100px;
}
.box{
      width:100px;
      height: 100px;
      background-color: black;
      margin-left:100px;
}
.content{
      width: 50px;
      height: 50px;
      background-color: yellow;
}

CSS

这个时候时候我们在浏览器中看到的样式是这个样子的：

现在我们给content加上定位的样式。

.content{
      position:absolute;
      left: 50px;
      width: 50px;
      height: 50px;
      background-color: yellow;
}

CSS

这个时候浏览器中的样式就会发生改变，content那个黄色的小方块会跑到橘黄色的方块外面：

这是因为，当我们给content设置position:absolute;之后，浏览器在渲染的时候，会先向上找到box这个div，看看这个div有没有定位，因为没有，所以继续向上找wrapper，依然没有，再向上找body，还是没有，所以最后就是相对于浏览器边框定位，这个时候content的left属性就是相对于浏览器边框左边有50px的距离的意思。

现在我们把content的定位换成relative，浏览器中的结果变成了这个样子：

本来content黄色小方块在黑色方块的左上角，然后relative相对与自身的位置进行定位，这个时候的left属性的意思就是相对于本来在黑色左上角的那个位置向右移动了50px的距离，也就是现在这个黄色小方块所在的位置。

因此，总结一下absolute和relative的特点如下：

• absolute：

1.脱离原来位置进行定位

2.相对于最近的有定位的父级进行定位，如果没有那么相对于浏览器边框定位。

• relative：

1.保留原来位置定位

2.相对于最近的有定位的父级进行定位

一般被用来设置参照物

fixed

fixed定位是相对于视口的定位，我们在网页上都见过左右两边不随着滚轮滚动而改变位置的广告栏，这种广告栏就是用fixed定位的。

<div class=”fixed”></div>

.fixed {
      position: fixed;
      right: 0px;
      top: 200px;
      height: 200px;
      width: 50px;
      background-color: red;
}

CSS

这段代码中，div.fixed这个元素就是一直在视口的右边，不随着我们滚动而改变相对于视口的位置。

最后提一点

• 值得注意的是，当我们写这样一段代码的时候：

<div class=”demo”></div>

.demo{
      position: absolute;
      margin-top: 200px;
      height: 200px;
      width: 50px;
      background-color: red;
}

CSS

我们把absolute换成relative之后，会发现整个div会向上移动一小段距离，这是为什么呢？

答案其实就在上一篇的文章里，margin合并问题——body标签本身有8px的margin，而四个方向的margin自然包括了margin-bottom，我们为div.demo设置了margin-top，就会导致margin合并的问题发生，当position是relative的时候，并没有触发bfc，所以中间的距离会取二者的最大值，也就是200px，当position是absolute的时候，因为触发了bfc效果，从而消除掉margin合并的bug，因此中间的距离是200+8=208px。

一点小应用

1.我们学习了定位之后，就可以实现前面文章提到的元素水平垂直居中的效果了哟~

只要我们给一个div加上下面的样式：

div {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
      background-color: red;
}

CSS

这个div就会在有定位的父级里面是水平垂直居中了哟~

2.我们还可以实现多栏布局了！

首先我们写三个div，分别起类名为left、mid、right，然后分别加上如下的样式：

<div class=”left”></div>

<div class=”right”></div>

<div class=”mid”></div>

* {
      margin: 0px;
      padding: 0px;
}
div {
      height: 100px;
}
.left {
      position: absolute;
      left: 0;
      width: 100px;
      background-color: yellow;
}
.right {
      position: absolute;
      right: 0;
      width: 100px;
      background-color: #ffc;
}
.mid {
      margin-left: 100px;
      margin-right: 100px;
      background-color: #fcc;
}

CSS

我们首先固定左侧和右侧的两个div，然后让中间的div分别给左侧和右侧留出一个固定宽度的margin之后，让自身自适应屏幕的大小即可实现三栏布局效果。

• 要注意的是，div.mid记得写在后面，如果写在最前面的话，因为div是block块级元素会独占一行，这样就会把左侧和右侧的div给挤到下一行了。当然我们给.left和.right都加上top:0px;之后，这个问题也就不用考虑了。

这次的层模型总结就到这里了，希望对大家有帮助哟~