CSS相对定位，固定定位，绝对定位

首先了解一下定位的概念：在CSS中关于定位的内容是：position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在文本流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。

相对定位：relative

//相对定位书写代码
.box{
position:relative
}

相对定位特点：

相对定位： 1.参考点 相对于元素自身在文档流中的位置

2.没有脱离文档流

3.层级默认会上调 可以通过 z—index来调整

4.默认会在原来文档流位置 可以使用 top left bottom right 调整位置

5.一般用于对元素位置的微调

固定定位:fixed

//固定定位代码
.box{
 position: fixed;
}

固定定位特点：

                 1、参考点 浏览器的可视窗口

                  2、脱离文档流

                  3、层级默认会上调 可以通过 z-index来调整

                  4、默认会在原来文档流位置 可以使用top left bottom right 来调整位置

                  5. 使用场景 想要元素相对于浏览器窗口定位

绝对定位：absolute

//绝对定位
.box{
position: absolute;
}

绝对定位特点：

                1.参考点：距离自己最近的 非static的 祖先定位，如果找不到那么他的位置相对于最初                       的包含快

                2.脱离文档流

                3.层级默认会上调 可以通过 z-index来调整

                4.默认会在原来文档位置 可以使用 top  left bottom right 调整位置

                5.使用场景 一般 都是 子绝父相  

CSS定位的应用及注意事项

[1] : 相对定位（position: relative）：如果对某一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直（或水平)位置（top,right,bottom,left四值），让这个元素"相对于"它的起点进行移动。注：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留.

[2]  ：绝对定位(position: absolute)：绝对定位使元素的位置与文档流无关，所以不会占用空间。与相对定位不同，绝对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。注：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框.