深⼊理解css之absolute
在慕课⽹上看到的张鑫旭⼤神的视频，做的笔记，以便⽇后翻看。
绝对定位与float
  　1.绝对定位和float有⼀样的特性，都有包裹性，和破坏性。
  　2.absolute和relative
    如果不把他们俩放在⼀起，absolute越独⽴越强⼤。
    relative和absolute是分离的，对⽴的，绝不是什么兄弟关系！
    独⽴的absolute可以摆脱overflow的限制，⽆论是滚动还是隐藏
    <div class="scroll">
      <a href="javascript:;" class="close" title="关闭"></a>
      <img src="mm1" />
      <img src="mm2" />
    　</div>
    当两个图⽚⾼度超出容器⼤⼩时，这⾥的a标签⾥⾯是禁⽌不动的。
  3.⽆依赖的absolute定位
  　⽆依赖的意思
    不受relative限制的absolute定位，⾏为表现上是不使⽤top/right/bottom/left任何⼀个属性或使⽤auto作为值！
    定位的⾏为表现
    1.脱离⽂档流
    2.保持占位
  absolute特性表现
    1.去浮动
    2.位置跟随
  配合margin的精确定位
    1.⽀持负值定位
    2.超赞的兼容性
  4.实例
    1.图⽚图标绝对定位覆盖
    <a>求课<i class="icon-hot"></i></a> .icon-hot{position:absolute;width:28px;height:11px;margin:-6px 0 0 2x;background:url();}
    ⽤margin负值和position实现。
    2.下拉框最佳实践
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    .ul{position:absolute;width:260px;margin:39px 0 0 -1px;padding-left:0;list-style-type:none;border:1px solid #ccc;background-color:#fff;box-shadow:0px 1px 2px #d5d7d8;font-size:12px;}
    3.居中以及边缘对齐定位
      <div>
         <img src="loading.gif" class="course-loading" />
      </div>
      div{text-align:center;}
      img{position:absolute;margin-left:-26px;}-26是图⽚⾃⾝宽度的⼀半
      这⾥之所以会居中显⽰是因为， ；是个占位符，也是个字符。text-align是对这个空格起作⽤的。
    4.各种对齐溢出技巧
      表单注册的时候的*可以考虑使⽤position:absoluter实现绝对定位，margin-left：负值
      表单前⾯的图表可以使⽤position:absoluter实现
      使⽤绝对定位后的溢出不会被截取，超出后不会被截取
      总结：⽆依赖绝对定位为页⾯布局与重构提供了更加⼴阔的选型新思路
    5.脱离⽂档流
      回流与重绘，动画尽量作⽤唉绝对定位元素上
      两个absolute时候遵循后来者居上的原则 z-index潜在误区，误区：绝对定位元素都需要z-index控制层级，确定显⽰的垂直位置。
      绝对定位和z-index⽆依赖
        1.如果只有⼀个绝对元素定位元素，⾃然不需要z-index⾃动覆盖普通元素
        2.如果两个绝对元素，控制DOM六的前后顺序达到需要的覆盖效果，依然⽆z-index;
        3.如果多个绝对定位交错，⾮常少见，z-index:1控制
        4.如果⾮弹框类的绝对定位元素z-index>2必定z-index冗余，请优化
        6.绝对定位的left/right/top/bottom
          这些属性都要配合使⽤，双双配对的。如果设置了left:0;top:0；盒⼦就会位于窗⼝的左上⾓。
          当⽗容器有relative/absolute/fixed/sticky是绝对定位会根据⽗元素来计算。
          当只设置⼀个属性的时候，它只能在⼀个⽅向上起作⽤。
          当四个属性同时设置的时候，如果不设置宽⾼，会把容器拉开。设置了宽⾼后，优先left,top
        7.left/top/right/bottom与width/height
          实现⼀个全屏⾃适应的50%⿊⾊半透明遮罩层。
          通常是
            .overlay{
                position:absolute;
                width:100%;
                height:100%;
                left:0;
                top:0;
            }
          另外的实现⽅案：
            .overlay{
              position:absolute;
              left:0;
              top:0;
              right:0;
              bottom:0;
            }
        　没有任何宽度，没有⾼度。实现宽⾼满屏效果
          ⾸先，相互替代性
          很多情况下，absolute的翅膀拉伸和width/height是可以相互替代的。
          position:absolute;left:0;top:0;width:50%;
          等同于
          position:absolute;left:0;top:0;right:50%;
          注意：爆裂拉伸特性IE7+⽀持
          差异所在-拉伸更强⼤
            实现⼀个距离右侧200像素的全屏⾃适应的容器层。
            使⽤拉伸直接：
            position:absolute;left:0;right:200px;
            但是，width只能使⽤CSS3 calc计算
            position:absolute;left:0;width:calc(100%-200px);
          相互⽀持性
            1.容器⽆需固定width/height值，内部元素亦可拉伸；
          实现遮罩层
css固定定位
            2.容器拉伸，内部元素⽀持百分⽐width/height值。
              通常状况元素百分⽐height要想起作⽤，需要⽗容器的height值不是auto
              绝对定位拉伸下，即使⽗级容器的height值是auto，只要容器绝对定位拉伸形成，百分⽐⾼度值也是⽀持的。
              ⾼度⾃适应布局:
              .page{
                position:absolute;
                left:0;
                top:0;
                right:0;
                bottom:0;
              }
              .list{
                float:left;
                height:33.3%;
                width:33.3%;
                position:relative;
              }
            当left:0;right:0;width:50%时，的实际宽度是50%⽽不是100%
        合作性。
        当尺⼨限制，拉伸以及margin：auto同时出现的时候，就会有绝对定位元素的绝对居中效果！
        8.absolute⽹页整体布局适合移动web的布局策略
          与fixed，relative⼀样，absolute设计的初衷确实是定位。
          与fixed，relative不同的是，absolute包含更多特有且强⼤的特性。如果仅仅是使⽤其实现⼀些覆盖与定位，则⼤材⼩⽤了。
        absolute与整体布局
          1.body降级，⼦元素升级
            升级的⼦div类名.page{position:absolute;left:0;top:0;right:0;bottom:0}
            绝对定位受限于⽗级，因此
            html,body{height:100%}才能起作⽤
          2.各模块-头尾，侧边栏各居其位
            header,footer{position:absolute;left:0;right:0;}
            header{height:48px;top:0;}
            footer{heigth:52px;bottom:0;}
            aside{width:250px;position:absolute;left:0;top:0;bottom:0;}
          3.内容区域想象成body
            .content{
              position:absolute;
              top:48px;
              bottom:52px;
              left:250px;
              overflow:auto;
            }
          此时的头部尾部以及侧边栏都是fixed效果，不跟随滚动，避免了移动端position:fixed实现的诸多问题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。