定位布局

初步了解绝对定位：
我们上次提到了浮动定位，浮动定位可以用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代码我们把布局方式换成浮动：

影响了原本的文档流，但是不会把没有浮动的我的文案给遮住