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中的其他对象
Jan 16 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
JS delegate与live浅析
Dec 21 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
React组件refs的使用详解
Feb 09 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 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 echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
php实现学生管理系统
2020/03/21 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
IE中jscript/javascript的条件编译
2006/09/07 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
node内置调试方法总结
2018/02/22 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
vue项目中使用百度地图的方法
2018/06/08 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
python条件和循环的使用方法
2013/11/01 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python+tkinter实现学生管理系统
2019/08/20 Python
结束运行python的方法
2020/06/16 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
4s店总经理岗位职责
2013/12/31 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
团日活动总结书格式
2014/05/08 职场文书
团日活动总结怎么写
2014/06/25 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书