[问题记录]父元素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,所有最后发现问题的我,眼泪掉下来!!!
[问题记录]父元素position:relative的深坑的更多相关文章
- position应用之相对父元素的定位
分别添加以下style即可: 父元素position:relative; 子元素position:absolute; right:0px; bottom:0px;
- position:fix相对父元素定位
大家都知道,当position的值为fix时,生成绝对定位的元素,相对于浏览器窗口进行定位. 它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间. 如果需要将导航栏d ...
- 【CSS】position relative 用法
Relative是position的一个属性,是相对定位. position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:stat ...
- CSS子元素在父元素中水平垂直居中的几种方法
1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...
- position:relative/static/fixed/absolute定位的区别以及使用场景
absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...
- Echarts图标宽度变成100px,让图表宽度随着父元素自动适应,Vue实时监听宽度的变化,这可能是史上最好的解决方案!
最近工作中element后台管理使用Echarts图表,本后台项目分图表模式和列表模式,使用display控制显示隐藏,这样就引出了本文的问题. 问题1:Echarts图标宽度变成100px? 问题2 ...
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题 在IE6,IE7下,子元素使用position:relati ...
- 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法
内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...
- 子元素position:absolute定位之后脱离文档流,怎么使子元素撑开父元素
纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DO ...
随机推荐
- 201521123002 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123100 《Java程序设计》 第2周学习总结
一. 本章学习总结 1.本周学习了Java语言中各种数据类型以及运算符,其中大部分还是和c语言差不多,发现了各种语言的相通性 2.进一步学习了eclipse的功能和使用方法,学会了如何将其与码云连接更 ...
- Java:java中BufferedReader的read()及readLine()方法的使用心得
BufferedReader的readLine()方法是阻塞式的, 如果到达流末尾, 就返回null, 但如果client的socket末经关闭就销毁, 则会产生IO异常. 正常的方法就是使用sock ...
- 压缩空格的函数以及BCD码与ASCII相互转换函数
/**函数名:zip_space功能 :压缩空格的函数参数 : s 源字符串返回值: 0 成功**/ int zip_space(char *s){ int i,j; int len; ) { ; } ...
- python只re模块
while True: phone_number=input('please input your phone number:') if len(phone_number)==11 \ and pho ...
- OSGi-开发环境的建立和HelloWorld(04)
1 OSGi开发环境的建立 1.1 Equinox是什么 从代码角度来看,Equinox其实就是OSGi核心标准的完整实现,并且还在这个基础上增加了一些额外的功能(比如为框架增加了命令行和程序执行的入 ...
- Eclipse插件springsource-tool-suite在线和离线安装步骤
springsource-tool-suite插件是一个基于Eclipse的开发环境,为开发Spring应用程序而定制.它提供了一个即用的环境来实现,调试,运行和部署Spring应用程序,包括Pivo ...
- Data_Struct(LinkList)
最近在学数据结构,学到链表这节作业有链表,毕竟菜鸟代码基本照看书上算法写的,再加上自己的小修改,这里先记录下来,万一哪天想看了,来看看. 里面有用到二级指针,还是不太理解,还有就是注释不多,后续有了更 ...
- 简易RPC框架-私有协议栈
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Python 接口测试(四)
五:python数列化和反序列化 把python的对象编码转换为json格式的字符串,反序列化可以理解为:把json格式 字符串解码为python数据对象.在python的标准库中,专门提供了json ...