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 hasOwnProperty 方法 & in 关键字
Nov 26 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
vue-cli设置css不生效的解决方法
Feb 07 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下载CSS文件中的图片的代码
2013/09/24 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
python issubclass 和 isinstance函数
2019/07/25 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
深入探究HTML5的History API
2015/07/09 HTML / CSS
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
财务管理专业应届毕业生求职信
2013/09/22 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
项目合作意向书模板
2014/07/29 职场文书
车间主任岗位职责
2015/02/03 职场文书
2016春节家属慰问信
2015/03/25 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js