2022.04.14-flex布局与position定位存在冲突

情况：现在布局很多时候用到flex方式，有次我将flex布局后的元素B，然后给元素B添加position定位，发现元素B无法被子元素撑开

<!DOCTYPE html>
<html>
<head lang="zh-CN">
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <title>flex布局与position定位存在冲突</title>
 <style>
    * {
        padding: 0;
        margin: 0;
    }
    #container {
        background-color: #cccccc;
        width: 500px;
        height: 300px;
        /* 添加的定位css */
        position: relative;
    }
    #content {
        background-color: rgb(0, 174, 255);
        display: flex;
        justify-content: space-around;
        /* 添加的定位css */
        position: absolute;
        top: 100px;
    }
    #content li {
        width: 50px;
        height: 50px;
        margin: 5px;
        list-style: none;
        background-color: burlywood;
    }
 </style>
</head>
<body>
    <div id="container">
        <ul id="content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

解决方式一：

给#content手动设置宽度为100%

#content {
        background-color: rgb(0, 174, 255);
        display: flex;
        justify-content: space-around;
        /* 添加的定位css */
        position: absolute;
        top: 100px;
        /* 手动设置宽度为100% */
        width: 100%;
    }

解决方式二：

为#content包裹一层

<div id="container">
        <div class="box">
           <ul id="content">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul> 
        </div>
    </div>

#content {
        background-color: rgb(0, 174, 255);
        display: flex;
        justify-content: space-around;
    }
    .box {
        /* 添加的定位css */
        position: absolute;
        top: 100px;
        /* 手动设置宽度为100% */
        width: 100%;
    }

拓展：为什么position: absolute;绝对定位后，下级的flex不起作用，position 和 flex 不能一起用的原因是：爸爸position 脱离后不继承爷爷（上一级）的宽度了，爸爸根据内容自适应宽度了。所以孙子flex也不听话爸爸了,所以得给爸爸一个宽带百分比才能不冲突。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hl_qianduan/article/details/114578389
————————————————
版权声明：本文为CSDN博主「Heerey525」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hl_qianduan/article/details/114578389

2022.04.14-flex布局与position定位存在冲突

猜你喜欢