1.定位的几种方式

1. 静态定位 static 2. 绝对定位 absolute 3. 相对定位 relative 4. 固定定位 fixed

关于静态定位 static

静态定位：静态定位表示按照正常定位方案，元素盒按照在文档流中出现的顺序依次格式化。 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。如果没有指定元素的position属性值，也就是默认情况下，元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。说白了，平常我们根本就用不到“position:static”，不过呢，如果有时候我们使用javascript来控制元素定位的时候，如果想要使得其他定位方式的元素变成静态定位，就要使用“position:static;”来实现。

小结如下:

1. 缺省时，即为静态定位
2. 静态定位是指各个元素在html文档流中应有的位置，根据HTML超文本传输协议，浏览器在接受和解析网页时，是遵循从上往下来显示的
3. 静态定位时，无法通过left、right、top、bottom来设定元素的位置
4. 设置定位元素没有宽的情况下，宽度默认由浏览宽度决定的。

关于绝对定位 absolute

绝对定位：父元素没有设置相对或者绝对定位，定位则是相对于根元素html的位置，父元素设置了绝对或者是相对定位时，定位是相对于父元素的位置。在没有设置宽度的情况下，宽度是由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

小结如下:

1. 父元素设置定位，定位相对于父元素位置，父元素不设置定位，定位相对于根元素html。
2. 脱离文档流，定位后不占位，后面元素会占据原来的元素的位置。
3. 设置定位元素没有宽的情况下，宽度由里面内容自动撑开。

关于相对定位 ralative

相对定位：相对于原来的位置移动，不脱离文档流，宽高不变，不会影响其他元素位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

小结如下:

1. 定位元素位置是相对于自身元素位置决定的。
2. 不脱离文档流。
3. 设置定位元素没有宽的情况下，宽度默认由浏览宽度决定的。

关于固定定位 fixed

他特有的点是以浏览器的窗口来定义以自己的位置，不管浏览器是否滚动还是浏览器的大小，他始终出现在浏览器的一个固定的位置（比如菜单）

小结如下:

1. 以浏览器的窗口来定义以自己的位置，不管浏览器是否滚动还是浏览器的大小，他始终出现在浏览器的一个固定的位置。
2. 脱离文档流。
3. 设置定位元素没有宽的情况下，宽度由里面内容自动撑开。