若 top、right、bottom、left 均为 auto，则会变为常规流

来源：2-8 position-absolute（实际工作用的最多，同时也相对比较难）

幽辰

2019-08-07 14:26:24

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>æµ‹è¯•</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        
        <div class="parent">
            <div class="child">

            </div>
            <div class="one"></div>
        </div>

        <!-- <script src="" async defer></script> -->
    </body>
</html>

.parent{
    width: 200px;
    height: 150px;
    /* position: relative; */
    background-color: blue;
}
.child{
    width: 50px;
    height: 50px;
    background-color: red;
    margin-bottom: 20px;
    /* position: absolute; */
    /* left: auto;
    right: auto;
    top: auto;
    bottom: auto; */
}
.one{
    width: 50px;
    height: 50px;
    background-color: red;
}

若是这样写，是这个效果，两个红色的框都是常规流

但如果我的css这样写

.parent{
    width: 200px;
    height: 150px;
    /* position: relative; */
    background-color: blue;
}
.child{
    width: 50px;
    height: 50px;
    background-color: red;
    margin-bottom: 20px;
    position: absolute;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
}
.one{
    width: 50px;
    height: 50px;
    background-color: red;
}

按照视频上面讲的将会变成常规流，那么实现的效果将会是上一个图片的效果，但实现的效果却是下图

是不是我哪个地方实现错了？

写回答

2回答

好帮手慕慕子

2019-08-07

已采纳

同学你好，老师这里说lrtb都设置为auto会被打回原形是指会回到绝对定开始的位置（没有设置lrtb的时候）。不是说他会变成常规流哦

示例：只设置position:absolute;属性

显示的位置

综上所诉，可以发现，只要设置了position：absolute；这个元素就脱离了常规流，设置left/right/bottom/left/不会让它变为常规流哦

如果帮助到了你，欢迎采纳！

祝学习愉快~~~~

幽辰

提问者

2019-08-07

.parent{
    width: 200px;
    height: 150px;
    position: relative;
    background-color: blue;
}
.child{
    width: 50px;
    height: 50px;
    background-color: red;
    margin-bottom: 20px;
    position: absolute;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
}
.one{
    width: 50px;
    height: 50px;
    background-color: red;
}

即使css这样写都还是一样的效果

0 学习 · 40143 问题

查看课程

相似问题

老师relative设置right属性问题

回答 1

top，bottom，left，right设置为auto是什么意思

回答 1

给son增加个left:100px;为啥是往右移动了？

回答 2

绝对定位中的top,right,left,bottom问题

回答 2

在CSS定位中使用偏移量是不是只有top、right、left、bottom这几个属性？

回答 3

打开慕课网App查看更多内容