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 相关文章推荐
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
js中document.write的那点事
Dec 12 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
JS实现无限轮播无倒退效果
Sep 21 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类
2006/07/15 PHP
PHP制作图型计数器的例子
2006/10/09 PHP
用php来检测proxy
2006/10/09 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
php实现简单四则运算器
2020/11/29 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
Python简单操作sqlite3的方法示例
2017/03/22 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
办公室助理岗位职责
2013/12/25 职场文书
物业管理计划书
2014/01/10 职场文书
关于元旦的广播稿
2014/02/16 职场文书
班级年度安全计划书
2014/05/01 职场文书
新闻人物通讯稿
2014/10/09 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle