![Bild wird hochgeladen...]
认证高级PHP讲师
.box { position: absolute; top: 0; left: 0; } /* 或者 */ .wrapper { display: flex; align-items: flex-end; }
看下我有没有猜错你的意思；
<p class="container"> //大容器100% <p class="wrapper"> <p class="content"></p>//内容区域 <p class="refresh"></p> //小盒子显示的上拉状态 </p> //滚动区域 <p class="scrollBox"> <p class="bar"></p> </p>//我是滚动条 </p> <style> .container{ position:relative; height:100%; overflow:hidden; /*.....*/ } .wrapper{ position:relative; height:auto; /*.....*/ } .content{ position:relative; height:auto; /*....*/ } .refresh{ position:relative; float : left; width:100%; height:40px; /*......*/ } .scrollBox{ position:absolute; height:100%; right:0px; top:0px; /*因为scrollBox的父元素是container，而且改变的是content，所以这里不会发生改变*/ } .bar{ position:relative; height : /*通过js计算并更新*/; } </style>
这里你可以让wrapper和content的高度一样，也就是position都为relative，refresh这里使用float，然后设定好宽高。因为refresh这里已经脱离了文档流，所以不会影响wrapper的高度，container设定为overflow：hidden。 当你往上拉过头的时候，refresh会自然而然的上来。不知道这样行不行。
最无脑的是用position:absolute实现：
<body style='margin: 0;font-size: 36px;'> <p id='bigbox' style='position: absolute;width: 100%;height: 100%;background-color: rgba(0,0,0,0.2);'> <span>大盒子</span> <p id='smallbox' style='position: absolute;width: 500px;height: 500px;background-color: red;bottom: 0;'> <span>小盒子</span> </p> </p> </body>
*要注意的是，大盒子也要设置position，小盒子的position才知道是和谁去对比，如果父级节点找不到position它会继续向上找直到找到有position的DOM节点
固定高度+margin负值
大的p绝对定位 小的p 相对定位 bottom 为0 不就可以了吗
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
看下我有没有猜错你的意思；
这里你可以让wrapper和content的高度一样，也就是position都为relative，refresh这里使用float，然后设定好宽高。因为refresh这里已经脱离了文档流，所以不会影响wrapper的高度，container设定为overflow：hidden。 当你往上拉过头的时候，refresh会自然而然的上来。不知道这样行不行。
最无脑的是用position:absolute实现：
*要注意的是，大盒子也要设置position，小盒子的position才知道是和谁去对比，如果父级节点找不到position它会继续向上找直到找到有position的DOM节点
固定高度+margin负值
大的p绝对定位 小的p 相对定位 bottom 为0 不就可以了吗