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

先来看看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 //获取元素距离最近含有 ”定位“ 属性标签左侧的距离

更多专业前端知识，请上【猿2048】www.mk2048.com

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

ios fixed定位后内容不显示_记录CSS中 position:fixed 踩的坑
在 html 页面的css样式中,如果将 position 属性的值设置为 fixed,那就表示其元素的位置相当于显示设备的可视区域进行定位,而今天在调试此属性时,却发生了一件奇怪的事件. posit ...
html本文框百分比定位,HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点...
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
h5 ios中软键盘弹起后 fixed定位失效
position: fixed;在ios手机中会存在一个失效情况: 如果页面有输入框存在,点击输入框软键盘弹起后会发生一个现象: 1.针对当前内容高度小于屏幕高度时: 上下滑动页面时候,发现之前fix ...
在ios中fixed定位元素丢失，Date兼容NaN
Aphorism Preface 差不多有半年没有更新blog了, 现在在新的公司适应了,最近喜得一千金,也慢慢适应了新的生活. 今天更新一篇关于最近遇到的 ios fixed定位元素丢失 bug i ...
chrome 扩展开发 - 如何获得iframe中的元素和相关问题解答
记一次需求完成的经过,要获取iframe中的元素,然后在页面进行分段跳转和相关操作,途中遇到了几个问题,方便后续自我回忆. 问题一 chrome扩展开发中 Popup页面无法持续保持的问题 [未解决 ...
php 上下位置居中,CSS_css中position:fixed实现div在窗口上下左右居中，上下左右居中代码如下复制 - phpStudy...
css中position:fixed实现div在窗口上下左右居中上下左右居中代码如下复制代码代码如下: div{ position:fixed; margin:auto; left:0; ri ...
基于Fixed定位的框选功能
最近项目涉及到一个支持批量操作的小需求,交互上需要使用框选来触发.在查阅了一些资料后发现,网上的方案基本都是基于绝对定位布局的,此方案如果是针对全局(在body上)的框选,还是可用的.但是现实需求里几 ...
CSS中的position定位
CSS中position的定位主要分为静态定位,相对定位,绝对定位和固定定位,属性值分别为:static,relative,absolute,fixed:元素的位置通过 "left" ...
fixed 定位苹果手机输入框触发时内容全部隐藏
问题出现在东钿微信公众号用户注册页面页面中只有两个输入框页面没有超过一屏,悬浮按钮也要出现在本页面 ,开始布局页面的时候没什么问题,然后我在我自己手机上测试 ,输入手机号码,非常奇怪的问题出现了, ...

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

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

最新文章

热门文章