一、HTML中的三种布局方式

1.标准流：默认的布局方式，即顺序布局

HTML中有两大元素：块级元素(占用一行)、内联元素(不占一行)

块级元素标记比如：div、hn、ul、ol、table、p

内联元素标记比如：a、span、image、input

2.浮动

3.定位

二、Position改变定位方式（参数）

1.static：默认方式（标准流）

2.relative：相对定位

元素还处于文档流（从上至下、从左至右）中，

但是我们可以通过left、right、top、bottom来改变元素的位置，这个时候块元素就有了层的概念，后写的元素将覆盖在前写的元素。

当设置left和top时，元素会向浏览器窗口的下和右移动。right和bottom则相反。

3.absolute：绝对定位

元素将会脱离文档流，不会影响父级的高度。这个时候块级元素将会拥有层级概念 。当设置元素的left、right、top、bottom时，元素在整个网页中都将会进行移动定位的，（注意：如果没设置，那么absolute的元素还将处在文档流，但是不占据父级内容）在absolute中，top、right、top、bottom就会相对于父级的对应位置，而不像relative一样。

4.fixed：固定定位

会脱离文档流，用left、right、top、bottom控制（控制原理同absolute），有层概念，元素会相对浏览器窗口固定。

5.inherit：继承父元素的定位属性

其实就是把父元素的position属性的值继承过来。其他不继承。

三、层级

拥有层级关系的元素有z-index属性。其属性值越大，越在上面。当父元素大于其他元素的时候，子元素无论无何都回大于其他元素。