1

子元素绝对定位position: absolute跟随父元素overflowscroll滚动了 -利来国际app

瘦七斤改名字 2021-11-01
270

起因

写项目的时候忽然遇到一个问题,子元素绝对定位position: absolute,父元素(box)设置 overflow:scroll超出部分滚动。
结果定位的元素(child-1)仍然会随着滚动条滚动,按照原先的理解,父元素内部滚动是不会影响固定定位的元素的。

class="box"> <div class="child-1">div> <div class="child-2">div>
<style> .box { height: 300px; background-color: red; padding-top: 200px; position: relative; overflow: scroll; } .child-1 { position: absolute; top: 0; height: 100px; width: 100%; background-color: green; z-index: 999; } .child-2 { height: 400px; background-color: deepskyblue; } style>

结果就是出现横向滚动条时,child-1元素会跟随滚动条滚动。

解决方法

出现这样的问题就是因为父元素设置了position: relative,父元素相对定位会导致,滚动条在滚动的同时,将父元素的位置也移动了,而child-1定位于父元素,所以会跟随父元素一起滚动。
所以我们解决方法就是在 child-2外层再套一层用于滚动的div。

class="box"> <div class="child-1">div> <div class="scroll"> <div class="child-2">div> div>
<style> .box { height: 300px; background-color: red; position: relative; overflow: scroll; } .child-1 { position: absolute; top: 0; height: 100px; width: 100%; background-color: green; z-index: 999; } .scroll { height: 100%; overflow: scroll; padding-top: 200px; } .child-2 { height: 400px; background-color: deepskyblue; } style>

补充position 属性小知识点

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

描述
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20” 会向元素的 left 位置添加 20 像素。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。
「喜欢文章,快来给作者赞赏墨值吧」
【利来手机国际的版权声明】本文为墨天轮用户原创内容,转载时必须标注文章的来源(墨天轮),文章链接,文章作者等基本信息,否则作者和墨天轮有权追究责任。如果您发现墨天轮中有涉嫌抄袭或者侵权的内容,欢迎发送邮件至:[email protected]进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论