2021-01-05 深入理解absolute

1、无依赖的绝对定位

1.1无依赖的意思

不受relative限制的absolute定位，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值。

1.2 特性
  • 去浮动 - 设置了absolute属性后float浮动失去效果
<div>
    <img src="./img/1000.png" alt="">
    <img class="img2" src="./img/1002.png" alt="">
    <img src="./img/1005.jpg" alt="">
</div>
初始样式.png

设置浮动：

.img2 {
    border: 1px solid red;
    box-sizing: border-box;
    float: left;
}
第二张图片设置浮动.png

再设置绝对定位：

.img2 {
    border: 1px solid red;
    box-sizing: border-box;
    float: left;
    position: absolute;
}
设置绝对.png
  • 位置跟随

2、一些实际应用

2.1
<div class="box">
    <span class="icon-recom">推荐</span>
    <div class="content"></div>
    <span class="icon-recom icon-recom1">推荐</span>
</div>

.content {
    display: inline-block;
    width: 200px;
    height: 300px;
    background-color: antiquewhite;
}
.icon-recom {
    width: 60px;
    height: 20px;
    color: #fff;
    background-color: orange;
    position: absolute;
}
.icon-recom1 {
    /* transform: translateX(-100%); */
    margin-left: -60px;
}
absolute.png
2.2
<div class="wra">
    <!-- 内容部分 -->
    <div class="content"></div>
    <!-- 定位在内容右边的部分 -->
    <div class="fixed-wra">
        <!-- 为了使text-align属性起作用，因为绝对定位元素具有跟随性 -->
        &nbsp;
        <!-- 定位的具体内容 -->
        <div class="fixed-con">
            <div class="item">元素</div>
            <div class="item">元素</div>
            <div class="item">元素</div>
        </div>
    </div>
</div>

    .wra {
        width: 800px;
        margin: 0 auto;
    }
    .content {
        width: 100%;
        height: 1200px;
        background-color: antiquewhite;
    }
    /* 重点看的样式 开始 */
    .fixed-wra {
        text-align: right;
        /* 为了不让&nbsp;影响页面布局 */
        height: 0;
        overflow: hidden;
    }
    .fixed-con {
        display: inline-block;
        position: fixed;
        margin-left: 50px;
        bottom: 100px;
    }
    /* 结束 */
    .item {
        width: 50px;
        height: 50px;
        background-color: #409eff;
        color: #fff;
        text-align: center;
        line-height: 50px;
        border: 1px solid #fff;
        box-sizing: border-box;
    }
页面内容右下角固定.png
2.3
<div class="form-wra">
    <div class="form-item">
        <label class="form-title"><span class="form-tip">*</span>用户昵称</label>
        <div class="form-input"></div>
    </div>
    <div class="form-item">
        <label class="form-title">手机号码</label>
        <div class="form-input"></div>
    </div>
    <div class="form-item">
        <label class="form-title"><span class="form-tip">*</span>登录密码</label>
        <div class="form-input">
            <span class="m-tip">请输入6-16位密码，区分大小写，不能使用空格</span>
        </div>
    </div>
    <div class="form-item">
        <label class="form-title">备注</label>
        <div class="form-input"></div>
    </div>
</div>

    .form-wra {
        width: 600px;
        margin: 20px auto;
        /* 使用绝对定位的元素，会超越overflow的限制，使overflow不起作用 */
        overflow: hidden;
    }
    .form-item {
        margin-top: 20px;
    }
    .form-title {
        width: 75px;
        height: 40px;
        line-height: 40px;
        float: left;
    } 
    .form-input {
        display: inline-block;
        width: 500px;
        height: 40px;
        border: 1px solid #d5d5d5;
        box-sizing: border-box;
    }
    /* 注意 */
    .form-tip, .m-tip {
        position: absolute;
    }
    .form-tip {
        color: red;
        margin-left: -1em;
    }
    .m-tip {
        line-height: 40px;
        margin-left: 510px;
    }
表单label对齐.png

动画尽量作用在绝对定位元素上！

当当前元素设置为absolute后，如果它的父级或祖先元素没有设置position:relative/absolute/fixed/sticky中任意一个，则绝对定位元素的top/left/right/bottom值相对于浏览器页面最外层元素定位，否则随着最近的设置了position:relative/absolute/fixed/sticky的父级或祖先元素定位。

3、z-index无依赖

  • 如果只有一个绝对定位元素，自然不需要z-index，自动覆盖普通元素；
  • 如果两个绝对定位元素，控制DOM流的前后顺序达到需要的覆盖效果（后来居上原则），依然无z-index；
  • 如果多个绝对定位交错，非常非常少见，z-index:1控制；
  • 如果非弹框类的绝对定位元素z-index>2，必定z-index冗余，请优化！

4、top/bottom和left/right对立属性同时存在时的表现——拉伸

4.1
position:absolute; left:0; top:0; width:50%;

等同于：

position:absolute; left:0; top:0; right:50%; // 拉伸

注意：浏览器IE7+才支持

4.2 差异所在——拉伸更强大

实现一个距离右侧200像素的全屏自适应的容器层，你会怎么实现？

  • 使用拉伸：
position:absolute; left:0; right:200px;
  • 但是，通过设置width实现只能使用CSS3 calc计算(兼容性差)：
position:absolute; left:0; width: calc(100%-200px);
4.3
  • 容器无需固定 width/height值，内部元素亦可拉伸；
  • 容器拉伸，内部元素支持百分比width/height值；
    a.通常情况下，元素百分比height要想起作用，需要父级容器的height值不是auto；
    b.绝对定位拉伸下，即使父级容器的height值是auto，只要容器绝对定位拉伸形 成，百分比高度值也是支持的。
4.4

如果拉伸和width/height尺寸同时存在时，width/height设置的尺寸优于left/top/right/bottom拉伸的尺寸。
因此，

position:absolute; top:0; left:0; right:0; width:50%;

的实际宽度是50%而不是100%。

当尺寸限制、拉伸以及margin:auto;同时出现的时候，就会有绝对定位元素的绝对居中效果！（注意：绝对居中特性IE8+支持！）

<div>
    <img class="img" src="./img/1000.png" alt="">
</div>

.img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 500px;
    margin: auto;
}
绝对居中.png

5、摆脱狭隘的定位

与fixed，relative一样，absolute设计的初衷确实是定位（position），
但与fixed，relative不同的是，absolute包含更多特有且强大的特性，
如果仅仅是使用其实现一些覆盖与定位，则未免大材小用了，
不妨发挥其潜力，试试使用absolute实现网页的整体布局，
你会发现：兼容性好，自适应强，扩展方便，性能优异，可以方便实现诸多效果，适合移动端，PC端同样精彩。

5.1 满屏
<div class="page"></div>

.page {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: antiquewhite;
    }
满屏.png
5.2 实现header、(asideMenu)、content、footer布局
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS深入理解之absolute 笔记
    absolute和float的相同特性表现 破坏性： 包裹性： absolute和float不能同时存在，对flo...
    soojade阅读 1,400评论 0赞 1
  • 深入理解absolute
    该文章总结自张鑫旭慕课，以及自己的使用经验和建议。 绝对定位absolute使用建议 建议无依赖相对定位relat...
    Devinnn阅读 938评论 0赞 2
  • absolute相关
    与float相同，具有包裹性和破坏性。 特性1：脱离文档流，让出占用的空间（宽高都为0） 特性2：去浮动，位置跟随...
    大瓶绿茶阅读 266评论 0赞 0
  • CSS绝对定位absolute详解
    之前介绍过CSS浮动float详解，本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动...
    张歆琳阅读 96,734评论 39赞 192
  • CSS 定位（postion、z-index）
    CSS 定位 CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute, fixed)：普通流是默认定...
    _空空阅读 5,800评论 0赞 15