关于iframe中使用fixed定位的一些问题
先来看看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定位的一些问题的更多相关文章
- Selenium多层级的iframe中元素的定位
很多时候我们遇到多层级的iframe就会想各种方法去获取iframe中的元素,但其实很简单就可以做到的,就是一级一级获取就可以了,获取至你需要的那个层级即可,下面看下实际的案例:(转) <fra ...
- iframe中positioin:fixed失效问题
页面中嵌套的iframe 内的 position:fixed元素定位失效fixed正常页面 此时position:fixed是根据浏览器窗口定位的,下拉一直位于左上角:以iframe形式嵌入后 此时p ...
- ie7中position:fixed定位后导致margin:0 auto;无效
布局网页时,需要把header固定在上方.直接使用position:fixed;现代浏览器以及ie8以上均正常显示,但是ie7中,header里面的子元素设置的水平居中并没有效果.做了各种尝试,都没有 ...
- webdriver如何定位多层iframe中元素
在 web 应用中经常会出现 iframe 嵌套的应用,假设页面上有 A.B 两个 iframe,其中 B 在 A 内,那么定位 B 中的内容则需要先到 A,然后再到 B. iframe 中实际上是嵌 ...
- Java中通过Selenium WebDriver定位iframe中的元素
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 问题:有一些元素,无论是通过id或是xpath等等,怎么都定位不到. 分析:这很可能是因为你要定位 ...
- selenium 中在 iframe 内的元素定位
有些时候 元素明明就在 但是通过什么方式定位都提示 定位不到元素 此时就要考虑元素是不是内嵌在iframe 中 对于内嵌在 ifra中的元素定位 首先定位到 iframe 元素 例如 iframe = ...
- HTML中设置在浏览器中固定位置fixed定位
之前的博文 HTML布局排版之制作个人网站的文章列表,中链接到的文章本身,也需要返回到列表主页,可在每个文章页面加导航条,也可以只加个返回到列表主页的链接.刚开始是想在博文最下方,加个返回文章列表的链 ...
- web移动端input获得光标Fixed定位失效解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输 ...
- js打印Iframe中的内容,并且不需要预览。
js打印Iframe中的内容,并且不需要预览 js代码如下: <script type="text/javascript" language="Javascript ...
随机推荐
- P4168 [Violet]蒲公英 区间众数
$ \color{#0066ff}{ 题目描述 }$ 在乡下的小路旁种着许多蒲公英,而我们的问题正是与这些蒲公英有关. 为了简化起见,我们把所有的蒲公英看成一个长度为n的序列 \((a_1,a_2.. ...
- C#-函数的传值与传址
传值就是将实参的值传到所调用的函数里面,实参的值并没有发生变化,默认传值的有int型,浮点型,bool型,char字符型,结构体等等. 传址就是将地址传到所调用的函数里面操作,实参的值也会跟着变化,传 ...
- TX2 五种功耗模式
工作模式介绍 Jetson TX2由一个GPU和一个CPU集群组成,CPU集群由双核丹佛2处理器和四核ARM Cortex-A57组成,通过高性能互连架构连接. 拥有6个CPU核心和一个GPU,您可以 ...
- PostMan --API调试工具
https://blog.csdn.net/fxbin123/article/details/80428216
- mocha测试框架
中文翻译文档:https://www.jianshu.com/p/9c78548caffa 阮一峰:http://www.ruanyifeng.com/blog/2015/12/a-mocha-tut ...
- 通过securecrt跳板机登录linux服务器
1 需要开运维平台开通用户对某台服务器的访问权限: 2 使用自己的账号密码登录(sso账号密码) 登录后,需要输入一个服务器分配给每个人唯一的密码:
- js的跨域问题和解决办法
我们在开发中,经常会遇到跨域请求数据问题,那么什么是跨域呢?跨域就是js在不用域之间的数据传输或者通信,比如你在使用ajax从另外一个域请求数据,或者你的页面引入了iframe,要从iframe中获取 ...
- Vue触发input选取文件点击事件
CSS .upload-btn-box { margin-bottom: 10px; button { margin-right: 10px; } input[type=file] { display ...
- jQuery练习 | 复选框及编辑模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 读取obj文件用Mesh创建实例化
using UnityEngine; using System.Collections; using System.IO; using System.Collections.Generic; usin ...