关于iframe中使用fixed定位的一些问题

xuexiangjys 发布于2019-04-23 13:20 / 3165人阅读

摘要：先来看看的定义生成绝对定位的元素，相对于浏览器窗口进行定位但是在中使用定位，实际上是相对于窗口进行定位，原因在于类似于创建了一个浏览器窗口，在使用一些获取鼠标位置以及元素位置等方法的时候把当作浏览器窗口来处理就行。

先来看看position: fixed；的定义：生成绝对定位的元素，相对于浏览器窗口进行定位；

但是在iframe中使用fixed定位，实际上是相对于iframe窗口进行定位，原因在于iframe类似于创建了一个浏览器窗口，在使用一些获取鼠标位置以及元素位置等方法的时候把iframe当作浏览器窗口来处理就行。

以下是一些在iframe中使用fixed需要考虑的常用js事件对象属性与方法:

获取鼠标的位置：

　　　　e.clientY // 获取鼠标在浏览器视窗的Y坐标，在iframe中相对于iframe窗口

　　　　e.screenY // 获取的是鼠标相对于屏幕的上边距，不考虑iframe因素，

获取元素的偏移量：

　　　　var position = Object.getBoundingClientRect(); //用于获取某个元素相对于浏览器视窗的位置集合，在iframe中相对于iframe视窗

　　　　　　position.top //获取元素 "顶部" 距离浏览器视窗 "顶部" 的距离

　　　　　　position.bottom //获取元素 "底部" 距离浏览器视窗 "顶部" 的距离

　　　　　　position.left //获取元素 "左侧" 距离浏览器视窗 "左侧" 的距离

　　　　　　position.right //获取元素 "右侧" 距离浏览器视窗 "左侧" 的距离

　　　Object.offsetTop //获取元素距离最近含有 ”定位“ 属性标签左侧的距离

idc机房托管超融合服务器 iframe的使用用法 vps日常维护中的一些要点总结关于IFRAME 关于javascript的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1738.html

前端页面总结

摘要：重叠元素元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素属性指定了一个元素的堆叠顺序哪个元素应该放在前面，或后面一个元素可以有正数或负数的堆叠顺序具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。元素的默认值，没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。 fixed 定位元素的位置相对于浏览器窗口是固定位...

番茄西红柿 2019-04-22 16:12 评论0 收藏0
mip-semi-fixed 走走又停停

摘要：代码设计融合了业界两种实现方案，非下页面中通过更换实现，下的页面由于要特殊处理元素，所以会科隆一个节点，具体代码参考开源代码。子节点必选项需要滑动后悬浮的代码的容器，组件科隆的也是这个节点。写在前面 MIP 中悬浮元素的特殊情况其实组件上线已经有一段时间了，最开始看到这个需求是站长提交了一个这中功能的组件过来，不过看过代码立刻就想到了 MIP 页面的特殊性：从结果页打开的 MIP ...

yiliang 2019-08-20 15:31 评论0 收藏0
前端页面总结

摘要：定位使元素的位置与文档流无关，因此不占据空间。它的行为就像而当页面滚动超出目标区域时，它的表现就像，它会固定在目标位置。此元素会被显示为内联元素，元素前后没有换行符。以下内容部分转载自菜鸟教程 CSS层叠样式表(CascadingStyleSheets) 内联：内嵌： hr {color:sienna;} p {margin-left:20px;} body {backg...

番茄西红柿 2019-04-23 15:06 评论0 收藏0
web前端 —— 移动端知识的一些总结

摘要：打个招聘广告杭州阿里巴巴招前端想去西溪的也可帮推荐，比较缺人，机会多多广告位长期有效，有兴趣简历我邮箱个人在移动端的一些总结归纳，有新的知识点会一直更新一部分用做动画时，变形尽量通过来实现，而不是用，等属性。不过的事件有一个事件穿透的问题。打个招聘广告：杭州阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@q...

Astrian 2019-08-28 18:19 评论0 收藏0
web前端 —— 移动端知识的一些总结

摘要：打个招聘广告杭州阿里巴巴招前端想去西溪的也可帮推荐，比较缺人，机会多多广告位长期有效，有兴趣简历我邮箱个人在移动端的一些总结归纳，有新的知识点会一直更新一部分用做动画时，变形尽量通过来实现，而不是用，等属性。不过的事件有一个事件穿透的问题。打个招聘广告：杭州阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@q...

BetaRabbit 2019-08-22 10:58 评论0 收藏0