jquery设置控件位置的方法


Posted in Javascript onAugust 21, 2013

纯JS写法:

document.getElementById("child").style.left="800px";
document.getElementById("child").style.top="200px";*/
//offset()获取当前元素基于浏览的位置  
 var offsettop=$("#unamespan").offset().top;   
 var offsetleft=$("#unamespan").offset().left;  
  //position()获取当前元素基于父容器的位置             
  var positiontop=$("#unamespan").position().top;  
 var positionleft=$("#unamespan").position().left;  
//设置panel2的位置基于unamespan的坐标  
 $("#panel2").css({position: "absolute",'top':offsettop+100,'left':offsetleft+50,'z-index':2});  

首先需要设置控件的position属性
    position属性规定元素的定位类型,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
属性说明:
1 absolute:生成绝对定位的元素,相对于 static定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom"属性进行规定。

2 fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left","top", "right" 以及 "bottom" 属性进行规定。

3 relative 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20"会向元素的 LEFT 位置添加 20 像素。

4 static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left,right 或者 z-index 声明)。
5 inherit 规定应该从父元素继承 position属性的值。(ie中未支持此属性)

所有空间position的默认值为static,所以需要将其设置为其他属性 可进行定位

若有多个层 切需要设定层的层次关系 那么需要设置z-index属性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释:元素可拥有负的 z-index 属性值。

注释:Z-index 仅能在定位元素上奏效( position的值非static)!

说明
该属性设置一个定位元素沿 z 轴的位置,z轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

Javascript 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
获取表单控件原始(初始)值的方法
Aug 21 #Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 #Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 #Javascript
jquery ready(fn)事件使用介绍
Aug 21 #Javascript
javaScript面向对象继承方法经典实现
Aug 20 #Javascript
Table冻结表头示例代码
Aug 20 #Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 #Javascript
You might like
php插入排序法实现数组排序实例
2015/02/16 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
什么是JavaScript
2009/08/13 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
Python基础中所出现的异常报错总结
2016/11/19 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
python实现抖音视频批量下载
2018/06/20 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
python socket 聊天室实例代码详解
2019/11/14 Python
wxPython色环电阻计算器
2019/11/18 Python
python实现猜拳游戏项目
2020/11/30 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
大学毕业生自我鉴定
2013/11/05 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
批评与自我批评范文
2014/10/15 职场文书
2015年护士节慰问信
2015/03/23 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python