先来看看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. P4168 [Violet]蒲公英 区间众数

    $ \color{#0066ff}{ 题目描述 }$ 在乡下的小路旁种着许多蒲公英,而我们的问题正是与这些蒲公英有关. 为了简化起见,我们把所有的蒲公英看成一个长度为n的序列 \((a_1,a_2.. ...

  2. C#-函数的传值与传址

    传值就是将实参的值传到所调用的函数里面,实参的值并没有发生变化,默认传值的有int型,浮点型,bool型,char字符型,结构体等等. 传址就是将地址传到所调用的函数里面操作,实参的值也会跟着变化,传 ...

  3. TX2 五种功耗模式

    工作模式介绍 Jetson TX2由一个GPU和一个CPU集群组成,CPU集群由双核丹佛2处理器和四核ARM Cortex-A57组成,通过高性能互连架构连接. 拥有6个CPU核心和一个GPU,您可以 ...

  4. PostMan --API调试工具

    https://blog.csdn.net/fxbin123/article/details/80428216

  5. mocha测试框架

    中文翻译文档:https://www.jianshu.com/p/9c78548caffa 阮一峰:http://www.ruanyifeng.com/blog/2015/12/a-mocha-tut ...

  6. 通过securecrt跳板机登录linux服务器

    1 需要开运维平台开通用户对某台服务器的访问权限: 2 使用自己的账号密码登录(sso账号密码) 登录后,需要输入一个服务器分配给每个人唯一的密码:

  7. js的跨域问题和解决办法

    我们在开发中,经常会遇到跨域请求数据问题,那么什么是跨域呢?跨域就是js在不用域之间的数据传输或者通信,比如你在使用ajax从另外一个域请求数据,或者你的页面引入了iframe,要从iframe中获取 ...

  8. Vue触发input选取文件点击事件

    CSS .upload-btn-box { margin-bottom: 10px; button { margin-right: 10px; } input[type=file] { display ...

  9. jQuery练习 | 复选框及编辑模式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  10. 读取obj文件用Mesh创建实例化

    using UnityEngine; using System.Collections; using System.IO; using System.Collections.Generic; usin ...