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 相关文章推荐
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
改变Apache端口等配置修改方法
2008/06/05 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
事件绑定之小测试  onclick && addEventListener
2011/07/31 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
Python 多线程的实例详解
2017/09/07 Python
python散点图实例之随机漫步
2018/08/27 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
浅析Python迭代器的高级用法
2020/07/16 Python
C语言编程练习
2012/04/02 面试题
linux面试相关问题
2013/04/28 面试题
2014年营业员工作总结
2014/11/18 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android