先来看看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. 大数据list去重

    MaxList模块主要是对Java集合大数据去重的相关介绍. 背景: 最近在项目中遇到了List集合中的数据要去重,大概一个2500万的数据,开始存储在List中,需要跟一个2万的List去去重. 直 ...

  2. angular的一些思考

    来公司做的第一个产品就是用angularjs来写的 我对整体这个产品架构的理解: 这套系统做的做的目的是实现所有的功能可配置化,使用MVC模型,有model层,view层,和controller层,m ...

  3. 通过Maven简单搭建SSM框架

    创建Maven就不用多说了,下面直接看Pom.xml里面的依赖吧 <properties> <!-- spring版本号 --> <spring.version>5 ...

  4. 修改node.js默认的npm安装目录

    转自https://blog.csdn.net/baijinwen/article/details/77961746 默认的安装路径:C:/用户/[用户名]/AppData/Roming/npm/no ...

  5. scrapyd 参考(https://www.jianshu.com/p/2a189127901a)

    一    Scrapyd简介 Scrapyd 是一个用来部署和运行 Scrapy 项目的应用,由 Scrapy 的开发者开发.其可以通过一个简单的 Json API 来部署(上传)或者控制你的项目. ...

  6. LTE

    LTE (telecommunication), Long Term Evolution, a telephone and mobile broadband communication standar ...

  7. STM32的GPIO工作原理 | 附电路图详细分析

    STM32的GPIO介绍 STM32引脚说明 GPIO是通用输入/输出端口的简称,是STM32可控制的引脚.GPIO的引脚与外部硬件设备连接,可实现与外部通讯.控制外部硬件或者采集外部硬件数据的功能. ...

  8. iozone文件系统测试工具在AM335x上的移植

     IOzone下载    下载地址:http://www.iozone.org 如下: 解压iozone,并进入到解压路径下的src/current 我的是  iozone3_487 命令:cd  i ...

  9. request.upload.addEventListener in not a function。

    本人在使用vue开发一套后台系统时,碰到了一个上传文件的需求,因为平时做的上传是使用ajax的方式来进行上传. 现在是使用axios来进行上传,方式没有什么改变: npm i  axios  直接上 ...

  10. extjs--combo动态获取数据

    <!DOCTYPE html> <html> <head> <link href="https://cdnjs.cloudflare.com/aja ...