CSS浮动（float）和定位（position）

float属性

float属性经常用于制作Horizontal Menu（横向菜单）和实现多列式网页布局。属性left和right，元素浮动之后，周围的元素会从新排列，为了避免这种情况，使用clear属性。

position定位

有五种属性值：属性static，relative，absolute，fixed，sticky

static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

relative

相对定位：relative：相对定位是相对于元素在文档中的正常位置--首先他出现在它所在的位置（即不设置position时的位置，然后通过垂直或者水平位置，让这个元素“相对于”它的原始起点进行移动）-->即相对于该元素在文档流中的正常位置进行偏移定位，原占位仍保留。相对定位元素经常被用来作为绝对定位元素的容器块。

absolute

绝对定位：absolute：绝对定位是相对于元素“最近的已定位的祖先元素”（即是设置了相对定位或者绝对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。相对于static定位意外的最相邻近的父级元素进行偏移定位，即相对于其直接父级元素。绝对定位较少直接单独使用在正常的文档流中，而是配合子相对定位来进行更灵活更精准的定位。换言之，就是绝对定位主要运行与进行了相对定位的元素框架层里面，然后依据该层的最左上点作为基准进行偏移定位。

fixed

固定定位：fixed：相对于浏览器窗口进行定位所以元素的位置相对于浏览器窗口是固定位置及时窗口是滚动的他也不会移动，即固定定位是以浏览器窗口的左上点作为基点进行偏移定位的。其位置跟随浏览器大小的变化而移动，应用较少，主要运行于浏览器窗口的贴边定位。绝对定位同样可以应用在固定定位的框架层里面。fixe定位使元素的位置与文档流无关，因此不占据空间。fixed定位的元素和其他元素重叠。
注意：对于这三种定位，被定位元素的位置都是通过“left”,“right”，“top”,"bottom",属性进行指定的，需要将被这三种方式定位的对象还原到正常的文档流中，可使用static属性对其再次定位。当我们不设定元素的position属性时默认的是static属性。

sticky

sticky英文意思是粘贴，粘，所以可以把它称为粘贴定位。position:sticky是基于用户的滚动位置来定位的。粘贴定位的元素是依赖于用户的滚动，在position:relative与position:absolute之间切换。它的行为就像position：relative，而当页面滚动超出目标区域后，他的标签就像positioin:fixed，会固定在目标位置。（元素定位表现为跨越特定阈值前为相对定位，之后为固定定位）

z-index

z-index属性指定了一个元素的堆叠顺序，一个元素可以有正数或者负数的堆叠顺序，数字越大层级越高优先显示，若两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素将被显示在最上面。

简要总结

	脱离文档	原占位保留	清除浮动方式	z-index属性
浮动（float）	是	否	clear:both	不支持
相对定位（relative）	否	是	position:static	支持
绝对定位（absolute）	是	否	position:static	支持
固定定位（fixed）	是	否	position:static	支持
静态定位（static）	否	是		不支持

参考链接：https://www.runoob.com/css/css-positioning.html
https://www.runoob.com/css/css-float.html