H5取经之路——随便写点儿

【相对定位】

* 1、使用position：relative；设置元素为相对定位的元素；

* 2、定位机制：

①相对于自己原来文档流中的的位置定位，当不指定top等定位值时，不会改变元素位置；

②相对定位元素，仍会占据原来文档流中的位置，而不会释放；

* 3、使用top、left、bottom、right调整位置，当left和right同时存在，left生效，当top和bottom同时存在，top生效。

【绝对定位】

* 1、使用position：absolute设置元素为绝对定位元素。

* 2、定位机制:

①相对于第一个非static的祖先元素（即使用了relative、absolute、fixed

定位的的祖先元素）进行定位

②如果所有祖先元素均未定位，则相对于浏览器左上角定位

③使用absolute的元素，会从文档流中完全删除，原有空间释放不再占有

【绝对定位元素的水平居中的方式】

* 1、left：50%；

* 2、设置margin-left为-width/2

【固定定位fixed】

* 1、position：fixed是一种特殊的绝对定位，父容器无法使用relative锁住。

* 2、定位机制：永远相对于浏览器定位。

【z-index属性】

* 1、设置定位元素的z轴层叠顺序

* 2、使用要求：

①必须是定位元素（relative、absolute、fixed）才能使用

②使用z-index，需要考虑父容器的约束，如果父容器为z-index：auto，则子容器的z-index可以不受父容器的约束；如果父容器z-index进行了设置，则子容器的层叠将以父容器的z-index为准（在同一父容器中的不同子元素，仍可以通过自己的z-index调整层叠关系）。

* 3、z-index：auto & z-index：0 的异同：

①z-index：auto为默认值，与z-index：0处于同一平面。

②z-index：auto不会约束子元素的z-index层次，而z-index：0会约束子元素必须与父元素处于同一平面

* 4、z-index相同（处于同一平面的定位元素）的层叠关系：后来者居上

【实现块级元素在块级元素中水平垂直居中】

* ①设置子容器为定位元素

* ②使用left：50%；margin-left：-width/2；

* top：50%；margin-top：-height/2；

【使用负边距增大元素宽度】

* ①不指定子容器宽度，指定高度或内容

* ②margin：0px -50px;可以使左右两边，各增加50px

【负边距实现双飞翼布局】

* ①由于main部分写在前面，可以保证主布局的优先加载

【display属性：设置元素的级别】

* none：隐藏元素，元素所占空间释放

* block：设为块级元素

* inline：设为内联元素（行级元素）

* inline-block：设为内联块级元素（本身为行级元素，但是具有块级元素所特有的各种属性，比如宽、高、text-align等）

巴特西