深⼊理解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小时内删除。