定位

相对定位：static/relative

那些脱离文档流的元素，比如设置了浮动获绝对定位的元素不会对相对定位产生影响。

static：在 css 中为元素定义 top、left、right、bottom、z-index 都不会生效（非 static 会生效）。

relative：表现与 static 一样，不过可以通过设置偏移量 top、left、right、bottom 和 z-index 来控制相对于其正常位置进行的偏移。

绝对定位和浮动

两者均具有包裹性和破坏性。
绝对定位的元素有以下几个特点：

• 块级元素的宽度在未定义时不在是 100%，而是根据内容自动调整
• 在不定义 z-index 的情况下，absolute 元素会覆盖在其他元素之上
• 它会脱离正常的文档流，不在占据空间，类似于浮动后的效果。

绝对定位生效时，浮动无效。

绝对定位和 relative

注意：relative 和 absolute 是分离的、对立的。而且，如果 absolute 不依赖 relative（不将绝对定位的父级元素设置 relative），则 absolute 更强大

不受 relative 限制的 absolute 定位，行为表现上不使用 top/right/bottom/left 任何一个属性或使用 auto 作为值。

定位的行为表现

脱离文档流和去浮动及位置跟随。

位置跟随：即将绝对定位的元素，如果原本是 block 水平的元素，跟在文字后面，则在另一行显示；如果这个元素原本是 inline/inline-block 水平的元素，跟在文字后面，那么，当设置绝对定位后，依然跟在文字后面。

在 chrome 浏览器下，一个元素如果绝对定位后，改变 display:block 时，是不会有任何渲染的，但是如果同时设置 display:block 的话则会改变。

在 IE7 浏览器下，任何元素绝对定位后，都会 inline-block .解决方法，在设置绝对定位元素外设置空 div 包裹着绝对定位元素。

配合 margin 的精确定位支持负值定位和具有很好的兼容性（能兼容 IE6 ）

不依赖 relative 的 absolute 相对定位的例子

图片图标使用绝对定位覆盖在其他元素上，不依 赖position：relative 实现的效果很好。对于不依赖 relative 的绝对定位，元素的位置很重要。

用 text-align 属性控制无依赖绝对定位元素的居中或边缘定位效果。

例如：

居中：父容器设置 text-align:center。居中元素前可借助一个 nbsp; 居中元素设置绝对定位，再借助 margin 值调整。

动画尽量作用于绝对定位元素上（不影响其他元素）。

绝对定位与 z-index

会有人误认为，绝对定位元素都需要 z-index 控制层级，确定其显示的垂直位置。
绝对定位的处置空间的层级规则是后来居上。

1. 如果只有一个绝对定位元素，自然不需要 z-index，自动覆盖普通元素；
2. 如果两个绝对定位元素，控制 DOM 流的前后顺序达到需要的覆盖效果，依然无 z-index；
3. 如果多个绝对定位交错，非常非常少见，z-index:1 控制；
4. 如果非弹框类的绝对定位元素 z-index>2，必定 z-index 冗余，需要优化。

left/top/right/bottom 与 width/height

两者具有相互替代性

例如：
已知页面已有样式

html，body{
   height:100%;}

如何实现一个全屏自适应的50%黑色半透明遮罩层，如何实现？

通常技术方案：

.overlay{
    position:absolute;
    width:100%;
    height:100%;
    top:0;left:0;
    ...
}

用 left/top/right/bottom 替代: