情况：现在布局很多时候用到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>参考自 flex布局与position:absolute/fixed的冲突问题