flex布局与position定位存在冲突

最新推荐文章于 2023-12-28 11:18:21 发布

Heerey525

最新推荐文章于 2023-12-28 11:18:21 发布

阅读量5.4k

点赞数 2

分类专栏： css 文章标签： html 定位 css

本文链接：https://blog.csdn.net/hl_qianduan/article/details/114578389

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

情况：现在布局很多时候用到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包裹一层

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

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