深入理解css之absolute

2019-10-08 15:34 来源:未知

在慕课网上看到的张鑫旭大神的视频,做的笔记,以便日后翻看。

绝对定位与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:#www.308877.com,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值,内部元素亦可拉伸;
          实现遮罩层
            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实现的诸多问题。

TAG标签:
版权声明:本文由澳门国际银河备用网址发布于www.308877.com,转载请注明出处:深入理解css之absolute