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 相关文章推荐
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
Vue自定义全局弹窗组件操作
Aug 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php getsiteurl()函数
2009/09/05 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
JS获取url链接字符串 location.href
2013/12/23 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
详解webpack分包及异步加载套路
2017/06/29 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python开发的HTTP库requests详解
2017/08/29 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
费用会计岗位职责
2014/01/01 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
信用卡工资证明范本
2015/06/19 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技