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

关于iframe中使用fixed定位的一些问题的更多相关文章

  1. Selenium多层级的iframe中元素的定位

    很多时候我们遇到多层级的iframe就会想各种方法去获取iframe中的元素,但其实很简单就可以做到的,就是一级一级获取就可以了,获取至你需要的那个层级即可,下面看下实际的案例:(转) <fra ...

  2. iframe中positioin:fixed失效问题

    页面中嵌套的iframe 内的 position:fixed元素定位失效fixed正常页面 此时position:fixed是根据浏览器窗口定位的,下拉一直位于左上角:以iframe形式嵌入后 此时p ...

  3. ie7中position:fixed定位后导致margin:0 auto;无效

    布局网页时,需要把header固定在上方.直接使用position:fixed;现代浏览器以及ie8以上均正常显示,但是ie7中,header里面的子元素设置的水平居中并没有效果.做了各种尝试,都没有 ...

  4. webdriver如何定位多层iframe中元素

    在 web 应用中经常会出现 iframe 嵌套的应用,假设页面上有 A.B 两个 iframe,其中 B 在 A 内,那么定位 B 中的内容则需要先到 A,然后再到 B. iframe 中实际上是嵌 ...

  5. Java中通过Selenium WebDriver定位iframe中的元素

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 问题:有一些元素,无论是通过id或是xpath等等,怎么都定位不到. 分析:这很可能是因为你要定位 ...

  6. selenium 中在 iframe 内的元素定位

    有些时候 元素明明就在 但是通过什么方式定位都提示 定位不到元素 此时就要考虑元素是不是内嵌在iframe 中 对于内嵌在 ifra中的元素定位 首先定位到 iframe 元素 例如 iframe = ...

  7. HTML中设置在浏览器中固定位置fixed定位

    之前的博文 HTML布局排版之制作个人网站的文章列表,中链接到的文章本身,也需要返回到列表主页,可在每个文章页面加导航条,也可以只加个返回到列表主页的链接.刚开始是想在博文最下方,加个返回文章列表的链 ...

  8. web移动端input获得光标Fixed定位失效解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输 ...

  9. js打印Iframe中的内容，并且不需要预览。

    js打印Iframe中的内容,并且不需要预览 js代码如下: <script type="text/javascript" language="Javascript ...

随机推荐

  1. PyQt5（3）——信号和槽初探

    信号和槽是QT的核心机制(当信号发射时,链接的槽函数会自动执行) 在pyqt5中信号和槽通过 QObject.signal.connect()链接. QObject类或子类(QWidget)派生的类都 ...

  2. python之小记with open...as..上下文管理器

    之前在学习file文件对象是说过,open文件操作结束后要关闭文件,否则会一直占用资源.但是当出现异常,如读取过程中文件不存在或异常,则直接出现错误,close方法无法执行,文件无法关闭 with o ...

  3. docker 查看容器信息---格式化

    镜像,ID,端口号,状态 docker ps -a --format "table {{.Image}}\t{{.ID}}\t{{.Ports}}\t{{.Status}}" 列出 ...

  4. 求两个数a、b的最大公约数

    //求两个数a.b的最大公约数 function gcd(a,b){ return b===0?a:gcd(b,a%b) }

  5. acl权限使用

    1.acl的设置技巧 *setfacl 用法: setfactl [-bkRd] [{-m|-x} acl参数] 目标文件名 -m:设置后续的acl参数给文件使用,不可与-x合用 -x:删除后续的ac ...

  6. PyCharm 通过Github和Git上管理代码

    1.最近希望通过github来管理代码,记录下pycharm上的设置,以下是针对windows版本.mac版本略有却别 如图所示 file-settings-Version Control-GitHu ...

  7. shell map使用

    # 定义初始化map declare -A map=([") # 输出所有key echo ${map[@]} # 输出key对应的值 "]} # 遍历map for key in ...

  8. V1-bug Alpha阶段项目展示

    V1-bug Alpha阶段项目展示 团队成员简介 Name Summary Sefie wxmwy V1-bug制造公司资深工程师精通各种抱大腿方式团队吉祥物 182 面面俱到流派一丝不苟 Powe ...

  9. LoadRunner性能测试结果分析（转载）

    性能测试的需求指标:本次测试的要求是验证在30分钟内完成2000次用户登录系统,然后进行考勤业务,最后退出,在业务操作过程中页面的响应时间不超过3秒,并且服务器的CPU使用率.内存使用率分别不超过75 ...

  10. golang笔记

    ----------- golang打包和部署到centos7. 参考:https://blog.csdn.net/qq_33230584/article/details/81536572