先来看看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. maven初步了解

    目标:创建一个父maven项目,有两个子项目分别为serverCenter,dbConnector. 建议:全程不要导入Jar包,全部使用maven依赖的方式导入包. 1.创建maven项目 这个创建 ...

  2. luogu4383 [八省联考2018]林克卡特树(带权二分+dp)

    link 题目大意:给定你 n 个点的一棵树 (边有边权,边权有正负) 你需要移除 k 条边,并连接 k 条权值为 0 的边,使得连接之后树的直径最大 题解: 根据 [POI2015]MOD 那道题, ...

  3. Laravel一些常用命令整理

    自动创建项目 laravel new || laravel new xxx || composer create-project --prefer-dist laravel/laravel blogc ...

  4. 编写高质量代码:Web前端开发修炼之道（二）

    第四章:高质量的css 1)怪异模式和标准模式 在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在 ...

  5. [转] Vagrant入门

    [From] https://www.cnblogs.com/davenkin/p/vagrant-virtualbox.html 简单地说,Vagrant让我们可以通过代码的方式快速地.可重复地创建 ...

  6. @RequestMapping的value属性

    package com.zby.controller; import javax.servlet.http.HttpServletRequest; import org.springframework ...

  7. Python——爬取百度百科关键词1000个相关网页

    Python简单爬虫——爬取百度百科关键词1000个相关网页——标题和简介 网站爬虫由浅入深:慢慢来 分析: 链接的URL分析: 数据格式: 爬虫基本架构模型: 本爬虫架构: 源代码: # codin ...

  8. Canvas 同心圆旋转示例解析

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

  9. Python爬虫：微博粉丝列表

    前言 本来打算做一个关于微博粉丝列表的爬虫,可以统计一下某个微博账号的粉丝里面,僵尸粉(水军)的数量,大V数量. 结果写完爬虫才发现,现在微博只给人看粉丝列表的前5页.......哈哈,好吧.挺无奈的 ...

  10. Android deeplink和AppLink原理

    APP开发中经常会有这种需求:在浏览器或者短信中唤起APP,如果安装了就唤起,否则引导下载.对于Android而言,这里主要牵扯的技术就是deeplink,也可以简单看成scheme,Android一 ...