标签：机制 无法 空间 相同 ott strong 元素 改变 指定
[相对定位 relative]
1、使用position: relative; 设置元素为相对定位的元素；
2、定位机制：
① 相对于自己原来文档流中的位置定位，当不指定top等定位值时，不会改变元素位置；
② 相对定位元素，仍会占据原有文档流中的位置，而不会释放。
3、使用top、left、bottom、right调整位置。当left和right同时存在，left生效，当top和bottom同时存在，top生效。
[绝对定位 absolute]
1、使用position: absolute;设置元素为绝对定位元素。
2、定位机制：
① 相对于第一个非static的祖先元素(即使用了relative/absolute/fixed定位的祖先元素)进行定位。
② 如果所有祖先元素均未定位，则相对于浏览器左上角定位；
③ 使用absolute的元素，会从文档流中完全删除，原有空间释放不再占有；
注：绝对定位absolute容易破坏父容器的位置，有时不经意就会带着父容器移动，破坏网页的布局，所以在用的时候，要小心一些使用，避免破坏网页布局
[固定定位 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相同(处于同一平面的定位元素)的层叠关系：后来者居上
标签：机制 无法 空间 相同 ott strong 元素 改变 指定
原文地址：http://www.cnblogs.com/dsmf/p/6991018.html
