定位与层模型

层模型

 

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就会脱离原来的位置，然后距离浏览器上边框和左边框分别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>

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

 

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

这个时候浏览器中的样式就会发生改变，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>

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

 

 

最后提一点

 

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

 

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

我们把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就会在有定位的父级里面是水平垂直居中了哟~

 

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

 

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

 

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

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

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

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

 

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

 

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

转载于:https://my.oschina.net/u/3953786/blog/2980782