外界影响因素 position
约 109 字小于 1 分钟
2025-03-10
absolute、fixed
position 值为 absolute 和 fixed 的元素会导致元素脱离文档流，影响 flex 布局，不会作为弹性子元素的存在，但是可以设置在容器上进行布局
relative
position 值为 relative 的元素不会导致元素脱离文档流，但也影响 flex 布局
示例
position:absolute 如何影响 Flex 布局
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>示例HTML文件</title>
<style scoped>
.item {
border: 1px dashed;
height: 50px;
padding: 10px;
}
.container {
height: 140px;
display: flex;
background: #8e96aa24;
}
</style>
</head>
<body>
<div class="container flex">
<div class="item">这是元素 A</div>
<div class="item">这是第二个元素 B</div>
<div
class="item"
style="position: absolute; top: 50px; left: 60px; background: wheat"
>
这是第三个元素 C
</div>
<div class="item">这是第四个元素 D</div>
</div>
</body>
</html>更新日志
2025/8/24 08:17
查看所有更新日志
e7112-1于