HTML中的几种定位方式

1.static（默认）

Position：static；默认值。也就是按照文档的流式（flow）定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适应，取得相对较好的布局效果。

Static定位不能通过z-index进行层次分级。

2.relative（相对定位）

Position：relative；在static基础上，让元素在它本来的位置上有一定的偏移。通过设置left/right、top/bottom值来实现。

相对定位的元素没有脱离文档流，仍处于文档流中，依然占据原来的位置，虽然它已偏移。

相对定位相对的元素是它自身在文档流中的位置。

Relative定位可以通过z-index进行层次分级。

3.absolute（绝对定位）

Position：absolute；使用绝对定位将一个元素放到文档（Document）中的指定位置。也是通过设置left/right、top/bottom值来实现。

绝对定位的元素从文档流中删除，并且它原来在文档流中所占的位置也将被删除，文档流中它后面的元素会按照文档流继续填充下去。不占位。

绝对定位的元素参照的是离它最近的父元素（非static定位）。通常采用“子绝父相”的定位方式。

当父元素的position为static定位时，absolute元素将以body坐标原点进行定位。

Absolute定位可以通过z-index进行层次分级。

4.fixed（固定定位）

Position：fixed；固定定位的元素的参照物始终是整个文档（viewport）。通过设置left/right、top/bottom值来让某一个元素定位在浏览器文档的某一个位置。

它与绝对定位的不同之处是：

绝对定位的参照是离它最近的非static定位的父元素，而固定定位的参照始终是viewport。

Fixed定位可以通过z-index进行层次分级。

5.float（浮动）

对于浮动：

• 浮动会将元素从文档流中删除，他的空间会被其他元素补上。（不占位）
• 浮动的参照物是父元素，是在父元素这个容器中飘。
•  浮动元素会对它之后的元素造成影响，为了去除影响，要清除浮动。
•  如果两个元素都设置了浮动，这两个元素并不会重叠，第一个元素会占据一定的空间，而第二个元素紧跟其后。若要改变，则要对第二个元素采用clear清除浮动。