[问题记录]父元素position:relative的深坑

个人博客迁移至：https://blog.plcent.com/欢迎大家访问

今天在写全屏切换的时候，发现一个问题就是切换时只能滚动第一屏，其他屏死都不动,

全屏滚动的原理:

是每次滚动父元素向上滚动一个元素的高度，比如每张图片都是100px高，第一次父元素 transform:translate3d(0px, -100px, 0px);第二次就是transform:translate3d(0px, -200px; 0px)

但是问题来了，第一次滚动时，第一个元素position()为：top:0px,left:0px;第二个为top:100px,left:0px;，所以可以滚动，

第二次滚动时，第一个元素position()为：top:-100px,left:0px;第二个为top:0px,left:0px;，此刻查找第三个元素position()为：top:100px,left:0px;，得到第三个top为100px,当然不滚动.

意思就是每次滚动，所以元素的position都减去了100px

但是我纳闷，说好的position不是应该不变的么？？

查了好久发现，在父元素上添加了一个position:relative,居然能滚了，position()值也不变了，在疑惑中，查看了jQuery手册，http://www.jquery123.com/position/

上面的解释赫然写着：

position():获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 译者注：offset parent指离该元素最近的而且被定位过的祖先元素 )

不知道有没有注意译注，( 译者注：offset parent指离该元素最近的而且被定位过的祖先元素 )，被定位过！！！他与offset()的区别是一个是相对于父元素，一个相对于document，父元素没有position过，相对的父元素也是document,所有最后发现问题的我，眼泪掉下来！！！

转载于:https://www.cnblogs.com/caoruiy/p/4745529.html