定位布局

初步了解绝对定位：
咱们上次提到了浮动定位，浮动定位能够用margin去推动一个元素在页面上的位置，并且可让div脱离文本流“浮起来”。今天咱们介绍第二大类也是更加剧要的布局方式：“定位”
定位故名思议是给一个横坐标给一个纵坐标而后把一个物体放置在制定的坐标点上。css关键词是position
position的可选项（定位方式）有五种：

别逼逼，让咱们用代码来更深入的体验一下：

细心的同窗确定看到了有个属性叫作z-index，这个属性是用来在两个绝对定位的元素同时在一个位置存在的时候决定谁在谁的上面渲染。举个例子：

这种你们的z-index都是100的状况下，固然是下面的div先渲染，由于后来居上。可是若是咱们改一下z-index的数值就能让蓝色的跑到前面来

OK绝对定位了解了咱们再来搞一下相对定位（relative）和fixed
relative跟absolute最不同的区别是，relative是须要跟本身本来存在的位置相比进行定位的，absolute是找到父级以及父级的父级（以此类推）中最近的一个有定位的（不是static）元素进行定位的：

仔细看看上面的代码就能够看出absolute和relative的去区别
fixed定位方式是用于在页面滚动的时候，元素相对于浏览器窗口是静止不变的

咱们在页面上创造除了不少一级标签，多到出现滚动条。

文案会相对于浏览器屏幕静止不动，也就是吸顶的效果

float和position的区别:
float仍会在本来文档流中占位置，position会覆盖文档流中的其余元素。

黄色边框彻底不占位置，若是宽度足够的话会把文案遮住。 下面的css代码咱们把布局方式换成浮动：

影响了本来的文档流，可是不会把没有浮动的个人文案给遮住