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 Mobile 导航栏代码
Nov 01 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
获取表单控件原始(初始)值的方法
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
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
详解PHP中的PDO类
2015/07/06 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
jquery 插件 人性化的消息显示
2008/01/21 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
python概率计算器实例分析
2015/03/25 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
django 读取图片到页面实例
2020/03/27 Python
pycharm的python_stubs问题
2020/04/08 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
初一生物教学反思
2014/01/18 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
董事长秘书工作职责
2014/06/10 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
公司的力量观后感
2015/06/05 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
JavaScript实现队列结构过程
2021/12/06 Javascript
Python OpenCV实现图形检测示例详解
2022/04/08 Python