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 相关文章推荐
js 事件小结 表格区别
Aug 13 Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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
中英文字符串翻转函数
2008/12/09 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
javascript 实现map集合
2015/04/03 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
python:socket传输大文件示例
2017/01/18 Python
Mac 上切换Python多版本
2017/06/17 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
点球小游戏python脚本
2018/05/22 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
python实现银行账户系统
2021/02/22 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
Java如何格式化日期
2012/08/07 面试题
日语系毕业生推荐信
2013/11/11 职场文书
主治医师岗位职责
2013/12/10 职场文书
学生党员思想汇报
2013/12/28 职场文书
抄作业检讨书
2014/02/17 职场文书
欠款起诉书范文
2015/05/19 职场文书