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.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
Nov 16 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
jQuery实现文档树效果
Feb 20 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
Javascript实现关闭广告效果
Jan 29 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
ThinkPHP分页实例
2014/10/15 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
python retrying模块的使用方法详解
2019/09/25 Python
如何在sublime编辑器中安装python
2020/05/20 Python
python 如何调用远程接口
2020/09/11 Python
pycharm永久激活超详细教程
2020/10/29 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
体育课课后反思
2014/04/24 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
小学教师求职信范文
2015/03/20 职场文书
家长反馈意见及建议
2015/06/03 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery