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 HTML中的table
Apr 15 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 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
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
python使用Pycharm创建一个Django项目
2018/03/05 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Python如何存储数据到json文件
2020/03/09 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
护理专科毕业生自荐书范文
2014/02/19 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
宣传工作经验材料
2014/06/02 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
导游词之珠海轮廓
2019/10/25 职场文书