|
将默认隐藏的绝对定位元素被relative限制在很深的DOM节点中，弊处相当多：首先增加了DOM的复杂度，不利于维护；越深的DOM元素，造成了回流越强；因为父标签需要relative限制，增加了CSS代码的消耗量；隐藏元素头部加载，延迟了页面的呈现速度；每个下拉几乎都要重新定位，其重用性受限。
margin-top与绝对定位的切换是一样的，优点在于省了一点点的CSS代码量。但是，相对absolute的动画切换，margin-top值的改变会产生更强的回流(reflow)，就性能上而言，要比absolute属性低。
如果是我，一定会把这些隐藏的绝对定位元素放在在body标签内部，且最底部加载，以提高页面的呈现速度，甚至根本就不加载。此做法就是mtime时光网下拉导航的做法，是推荐的做法。绝对元素的定位不是通过当前触发元素的relative限制，而是在body大环境中，直接通过触发元素的偏移值设定位置，是最直接最高效的做法。
在body标签下自由驰骋，这才是绝对定位元素真正应该呆的地方。真正有才华的元素应该放在更大的舞台上，限制在蹩脚的角落里注定要埋没的。
其余用margin。
- 包裹性
包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。
- 可用性隐藏
visibility: 属性规定元素是否可见,即使不可见的元素也会占据页面上的空间。
absolute的元素无宽度，无高度.
.completelyhidden {
display:none;
}
.visibilityhidden {
visibility:hidden;
}
对以上两种方法：不适合于屏幕阅读器用户
.hidden{
position:absolute;
top:-9999em;
}
.hidden{
position:absolute;
clip: rect(1px 1px 1px 1px); /* IE6,IE7 */
clip: rect(1px,1px,1px);
}
对以上两种方法：如果隐藏元素含有链接元素或是可获得焦点的控件元素，但是又是使用的可用性隐藏。这些隐藏的链接与控件也是可以响应键盘焦点Tab切换的，但是这会让键盘使用用户产生不解与疑惑的。所以，从某种意义说，某些情况下，要兼顾屏幕阅读器用户和键盘用户有时候是不可兼得的。
那么最佳隐藏方式是？请看后面.
- 配合JavaScript的控制
如果要显示隐藏的元素，咋办呢？因为不同的标签所处的display水平是不一样的，于是，我们很难有一个简单的统一的显示方法。例如，下面的代码可能使用于div,p标签，但是对于span等inline水平的元素，可能就会嗝屁了（原本单行显示结果换行）。顺带一提的是jQuery的显隐方法show()/hide()/toggle()就是基于display的，其会存储元素先前的display属性值，于是元素再显示的时候就可以准确地显示出之前的display值了。
而使用绝对定位实现的一些元素隐藏方法的控制就相对简单很多的。例如：position:absolute + visibility:hidden方法，当我们要让元素（原本非绝对定位元素）显示的时候，我们需要设置：
dom.style.position = "static";
dom.style.visibility = "visible";
而类似的position:absolute + top:-999em方法，当我们要让元素（原本非绝对定位元素）显示的时候，我们只需要设置：
dom.style.position = "static";
所谓“相对定位最小化影响原则”指：相对定位所影响的子元素最小化，或没有！
写页面，如果元素间的牵连甚广，例如很多个内部元素的定位要依托于外部标签，则该外部标签就像是抚养了一大堆孩子的妈妈，有了责任，有了牵连，其自身行动就会限制，不能随意改动，不能把妈妈的身份扔掉一走了之。
.test {width:25em; margin:2em auto;}
.box { padding:2em; border:1px solid #beceeb; border-radius:2px; background-color:#f0f3f9; position:relative; }
.ok { color:green; font-size:6em; position:absolute; right:-11px; bottom:-.5em; }
下面来看看最小化影响原则下的例子：
.test {width:25em; margin:2em auto;}
.box { padding:2em; border:1px solid #beceeb; border-radius:2px; background-color:#f0f3f9; }
.rel { position:relative; }
.ok { color:green; font-size:6em; position:absolute; right:-10px; top:-1em; }
relative absolute区别
relative顾名思义，移动后，原始位置仍在，新位置浮动在其他元素之上。（类似visibility）
absolute真身直接移走了。
注：margin对普通元素（真身）起作用。
| 