1、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

绝对定位：absolute（相对于 static 定位以外的第一个父元素进行定位）
绝对定位：fixed （相对于浏览器窗口进行定位）
相对定位：relative （相对于其正常位置进行定位，比如left:20px会向元素的 left 位置添加 20 像素）
静态定位：static（默认值。不进行定位，元素还是处于正常的文档流中，忽略上下左右的偏移和z-index声明）

2、z-index 有什么作用? 如何使用?

用于显示元素的上下层的叠加顺序，z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
参考1
参考2

3、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

position:relative不会影响其他的元素。虽然偏移了，但浏览器还是认为它在原来位置。
负margin会影响周边元素的位置

4、BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

BFC的全称是 Block Format Content（块级格式化上下文）

BFC特性

1、块级格式化上下文会阻止外边距叠加

当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。

因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠

2、块级格式化上下文不会重叠浮动元素

根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这个测试用例）。

3、块级格式化上下文通常可以包含浮动

如何触发BFC呢？

float 除了none以外的值，比如为：float: left / right;
overflow 除了visible 以外的值，比如为：overflow: hidden / auto / scroll;
display: table-cell / table-caption / inline-block / flex / inline-flex;
position: absolute / fixed;
fieldset元素

需要注意的是，display:table 本身并不会创建BFC，但是它会产生匿名框，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。