先来看看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. 部署LNMP架构及其应用

    部署企业LNMP架构 (一)首先安装nginx服务,具体请见另一篇关于nginx的博文. (二)安装MySQL数据库 .安装前准备 [root@localhost ~]# rpm -e mysql-s ...

  2. PyQt5(4)——菜单栏(使用外部exe)

    图像化建立菜单栏: ① 双击输入名称 就可以喽 如何添加工具栏呢: 新建一个快捷工具,拖到快捷栏,出现红色的小竖线. 至此 就完成了菜单栏和快捷方式的建立. 补充: python   如何调用外部的e ...

  3. weex 自定义Modul

    扩展iOS的功能 一. 新建 NSOjbect 子类, 并遵循协议<WXModuleProtocol> .h 代码 #import <Foundation/Foundation.h& ...

  4. netsh命令操作防火墙

    这里的netsh命令操作防火墙主要是在Windows 7及以上版本,以示例说明: 1.防火墙入方向添加一条规则,规则名字:RDP,协议tcp,动作为允许,端口号3389:简而言之,就是允许其他机器远程 ...

  5. python使用easyinstall安装xlrd、xlwt、pandas等功能模块的方法

    在日常工作中,使用Python时经常要引入一些集成好的第三方功能模块,如读写excel的xlrd和xlwt模块,以及数据分析常用的pandas模块等. 原生的python并不含这些模块,在使用这些功能 ...

  6. 转 zabbix 用户建立和中文化

    1. 1 登陆和配置用户   简介 本章你会学习如何登陆Zabbix,以及在Zabbix内建立一个系统用户. 登陆 这是Zabbix的“欢迎”界面.输入用户名 Admin 以及密码 zabbix 以作 ...

  7. Java super和this小结

    区别 this() / this. super() / super. 功能 调用本类构造.方法.属性 调用父类构造.方法.属性 操作方法 先查找本类是否有制定的调用结构,如果没有则调用父类 直接调用父 ...

  8. Linux -定时任务调度

    l crond 任务调度   crontab 进行定时任务的设置,. 概述 任务调度:是指系统在某个时间执行的特定的命令或程序. 任务调度分类:1.系统工作:有些重要的工作必须周而复始地执行.如病毒扫 ...

  9. Python中socket经ssl加密后server开多线程

            前几天手撸Python socket代码,撸完之后经过ssl加密,确保数据的安全,外加server端开启多线程保证一个客户端连接有一个线程来服务客户端,走了不少的弯路,网上的信息啥的要 ...

  10. SC OpenService 失败5:拒绝访问

    当我们在cmd里使用 sc delete  服务名  ,来删除服务的时候,报错误,SC OpenService 失败5:拒绝访问. 这似乎是因为权限不够,解决方法. 首先,我们必须先取得管理员权限,以 ...