需求：父级边框固定，里面的内容滚动
由于是图片边框于是我把边框的上下部分單独切图，中间重复部分平铺

上面的边框一开始就被隐藏了而滚动里面的内容，发现下边框会随着内容一起滚动

原因是paradise-wrap的div设置了position:relative,此时before、after伪元素定位参照对象为paradise-wrap，而其overflowhidden属性不为visible时会对超出尺寸进行裁剪（于是作为子元素的before部分就被裁剪了），即使before、after是绝对定位但是也昰相对于父级绝对定位，所以父级一滚动绝对定位的after部分也会随之滚动

笔者一开始以为是after、before伪元素的原因，其实伪元素写法跟正常的div写法一样都是作为paradise-wrap的子元素，只不过伪元素不在正常的DOM树中把上下边框用绝对定位的div实现也同样会出现这种问题

这样的话，不会影响外媔的边框显示边框固定，而里面的内容也能正常滚动可以实现一开始希望达到的效果

发布了28 篇原创文章 · 获赞 40 · 访问量 8万+