css文档流、父子容器包裹问题？

//css
.box2{
    width: 100%;
    height: 100px;
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
}
.box3{
    width: 100%;
    height: 100px;
    background-color: red;
    margin-top: 200px;
}

//html
<div class="box1">
    <div class="box2"></div>
    <div class="box3"></div>
</div>

根据如上代码可以看到，box2因为position：fixed的原因，是没有被包裹进box1中的：

但是当给box1加上padding: 0.1px(值>0.1px都可以)之后，box2就被包裹进了box1：

想请问一下这是为什么？有没有什么办法不给box1加padding也让box2被包裹进box1？如果没有的话如何让box2不用position：fixed也达到固定头部的效果？

阅读 2.1k

原因

其实，box2从来没有被包裹进box1。

之所以出现这种效果，仅仅是因为box1没有padding-top的时候，box3的margin-top会与box1的上边距及body的上边距折叠而已，此时，仅有box3的内容区被算在box1的内容区中；

box1有了padding-top(或border-top)后，box3的上边距也会被计算在box1的内容区中。

不用`fixed`的方法

下面是一种可供参考的方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .box2{
        width: 100%;
        height: 100px;
        background-color: black;
    }
    .box3{
        width: 100%;
        height: 100px;
        background-color: red;
        overflow: auto;
    }
  </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
        <div class="box3">
            twtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereeetwtw wereee
        </div>
    </div>
</body>
</html>

css文档流、父子容器包裹问题？

原因

不用`fixed`的方法

你尚未登录，登录后可以

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

快开发完的Vue3项目要做SEO该如何处理？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

css文档流、父子容器包裹问题？

原因

不用fixed的方法

你尚未登录，登录后可以

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

快开发完的Vue3项目要做SEO该如何处理？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

不用`fixed`的方法