05-定位 position absolute

1. position 和 float 相似
+ 两者有两大共性：包裹性，破坏性

包裹性
示例：

.div { 
    padding:20px; 
    margin-bottom:10px;
     background-color:yellowgreen; }
.abs { position:absolute; }

<div class="div">
            <img src='./u=280326699,1207777040&fm=27&gp=0.jpg'/>
            <p>无absolute</p>
        </div>
        <div class="div abs">
            <img src='./u=280326699,1207777040&fm=27&gp=0.jpg'/>
             <p>absolute后</p>
    </div>

效果：

从效果我们可以看出： position:absolute后，内容撑开了高度 和 float效果一样

float 也是典型的 inline-block 化元素，这种元素的 inline-block 化适用于任何水平的标签。例如平时我们要让span标签支持width属性，可能要设置：

span { display:block; width:100px; }

但是，有 float:left 和 position:absolute配合使用也可以达到效果

span { float:left; width:100px; }
span { position:absolute; width:100px; }

破坏性
浮动的破坏性在于切断 line box 链，致使高度塌陷，其占据的实体位置还是在的。
而 absolute 绝对定位不仅让高度塌陷而且没有他的实体位置，所以宽度也是塌陷的。

可以看到，图片应该的position:absolute属性后，父标签的高宽都塌陷了
想重构高质量的页面，少用绝对定位布局
一般的定位动能，使用 margin 实现 扩展性容错性 更强

margin 可以实现与 absolute布局一样的效果，且CSS属性使用量折半，更为关键的是，布局的扩展性与容错性大大增强了

滚动切换： margin-top 与绝对定位的切换是一样的，优点在于省了一点点的CSS代码量。但是，相对absolute的动画切换，margin-top值的改变会产生更强的回流(reflow)，就性能上而言，要比absolute属性低。

将默认隐藏的绝对定位元素被relative限制在很深的DOM节点中，弊处相当多：首先增加了DOM的复杂度，不利于维护；越深的DOM元素，造成了回流越强；因为父标签需要relative限制，增加了CSS代码的消耗量；隐藏元素头部加载，延迟了页面的呈现速度；每个下拉几乎都要重新定位，其重用性

• 使用 absolute 的元素和 float 相比会发生宽度丢失的问题

absolute 元素隐藏
元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的，以下将 absolute 和 dispaly 方法进行对比
absolute属性相关的隐藏方法，有三种

.hidden{
    position:absolute;
    top:-9999em;
}


.hidden{
    position:absolute;
    visibility:hidden;
}

.hidden{
    position:absolute;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

使用absolute属性控制DOM元素的显隐有三个关键点：页面可用性，回流与渲染，配合JavaScript的控制。

1. 可用性隐藏
   所谓可用性隐藏，就是兼顾屏幕阅读器这类互联网阅读辅助设备的隐藏方式。
   display:none; 和 visibility:hidden; 两种隐藏方式屏幕阅读器是读不了的
   对于像盲人这类需要借助屏幕阅读器的用户无法获取一些有用信息了。

如果希望隐藏内容能够被辅助阅读设备识别，就不能使用 display:none 以及 visibility:hidden 隐藏元素。可以使用模拟隐藏的隐藏方法，又称可用性隐藏。就是下面两种隐藏方法。

.hidden{
    position:absolute;
    top:-9999em;
}
.hidden{
    position:absolute;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

从可用性角度而言，“选项卡内容、点击展开”这类元素隐藏与显示就不推荐使用 display:none， 或者是position:absolute + visibility:hidden。

如果隐藏元素含有链接元素或是可获得焦点的控件元素，但是又是使用的可用性隐藏。这些隐藏的链接与控件也是可以响应键盘焦点Tab切换的，但是这会让键盘使用用户产生不解与疑惑的。所以，从某种意义说，某些情况下，要兼顾屏幕阅读器用户和键盘用户有时候是不可兼得的。
+ visibility:hidden; 隐藏元素但是依然占据位置
+ display:none 隐藏元素 元素脱标不占位置

回流与渲染

使用 absolute 隐藏显示元素是会产生重绘而不会产生强烈的回流。而使用 display:none 不仅会重绘，还会产生回流，DOM影响范围越广，回流越强烈。所以，就JavaScript交互的呈现性能上来讲，使用absolute隐藏是要优于display相关隐藏的。

配合JavaScript的控制
要让元素隐藏，很简单，直接：

dom.style.display = "none";

如果要显示隐藏的元素，display = “none”隐藏元素对应的是 diaplay:block 。
但是如果你将你一个 inline 或者 inline-block 或者 block 的元素隐藏后需要改变成显示，这些标签所处的 display 水平是不一样的，如果简单粗暴的都统一使用 diaplay:block 来显示元素的话，元素的属性被改变可能会带来一系列的后续问题进而影响到页面的布局。

例如，下面的代码可能使用于div, p 标签，但是对于span 等 inline 水平的元素将单行显示变成换行。

dom.style.display = "block";

使用绝对定位实现的一些元素隐藏方法的控制相对 diasplay 简单很多的。例如：position:absolute + visibility:hidden方法，当我们要让元素（原本非绝对定位元素）显示的时候，我们需要设置：

dom.style.position = "static";
dom.style.visibility = "visible";

而类似的position:absolute + top:-999em方法，当我们要让元素（原本非绝对定位元素）显示的时候，我们只需要设置：

dom.style.position = "static";

而无需担心原本标签的是 inline 水平还是 block 水平。所以，就显隐的 JavaScript 控制上来讲，absolute 相关方法要比display 略胜一筹。

结合上面三点讨论，我们可以看出，元素显隐交给 absolute 属性更合适

absolute与等高布局
两栏布局，随着随着内容的不同，有可能左侧栏高度较高，也有可能是右侧栏高度较高。所以，要实现无缝的填色，定高不行不通的，置高度不理显然也不行

<!-- 简单版实现侧边栏/分栏高度自动相等 -->
<div id="content">
        <div class="left">左边，无高度属性，自适应于最高一栏的高度</div>
        <div class="right">右边，无高度属性，自适应于最高一栏的高度</div>
        <div class="center">中间，高度600像素，左右两栏的高度与之自适应</div>
</div>

 #content{overflow:hidden;}
.left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:#cad5eb; float:left;}
.right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;}
.center{margin:0 410px 0 210px; background:#ffe6b8; height:600px;}

<!-- absoult实现 -->
<div class="box">
    <div class="left">
        <div class="equal_height left_bg"></div>
            <div id="leftCon" class="left_con">
            <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
        </div>
    </div>
    <div class="right">
        <div id="rightCon" class="right_con">
         <img id="rightImage" src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" />
         </div>
    </div>
</div>
    <div class="btn_box">
        <button id="btnLeftSide">左侧栏高度增加</button>
        <button id="btnRightSide">右侧栏高度增加</button>
    </div>

.box{
      width:66%; 
      border:1px solid：#6666; 
      background-color:#f5f5f5; 
      margin-left:auto; 
      margin-right:auto;
      overflow:hidden; 
      position:relative;
    }
  .equal_height{
      width:100%;
      height:999em;
      position:absolute; 
      left:0; top:0;
    }

  .left{
      width:25%; 
      float:left; 
      position:relative;
    }
  .right{
      width:74.6%; 
      float:right;
    }
  .left_bg{
      background-color:#fff; 
      border-right:1px solid #ccc;
    }
  .left_con{
      padding:1em; 
      position:relative; 
      z-index:1;
    }
  .right_con{
      padding:1em;
    }
  .box img{
      display:block;
    }
  .btn_box{
      width:66%; 
      margin:1em auto 3em;
    }


    $("#btnLeftSide").bind("click", function() {
    $("#leftCon").append('<img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />');
});
$("#btnRightSide").bind("click", function() {
    $("#rightCon").append('<img src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" />');
});

解决方法是让两栏等高：
应用了position:absolute的元素无宽度，无高度。
其中，实现等高效果的核心CSS代码如下：

.equal_height{width:100%; height:999em; position:absolute; left:0; top:0;}

同时，满足以下一些条件：

高度999em的绝对定位层位于侧栏容器内，侧栏position为relative
该栏实际元素内容用一个与absolute绝对定位层为兄弟关系的标签层包裹，position为relative，z-index值1或其他
左右栏的父标签需设置overflow:hidden，同时为了兼容IE6/7，需设置position为relative

由于绝对定位元素无高度的特性无宽度的特性，我们可以伪造一个高度足够高的绝对定位层（设置背景色，边框等属性），同时设置父标签溢出隐藏，那么其多出来的高度酒不会显示了，也就实现了看上去的等高布局效果了。

• absolute 和 IE6/7之间存在很多兼容性问题
• absolute 和 margin同时使用时 定位元素会发生垂直外边距塌陷问题
• absolute 和 float 同时使用时 定位元素会发生垂直外边距塌陷问题