jquery设置控件位置的方法_jquery

纯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轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

时间: 2024-09-17 13:32:40

jquery设置控件位置的方法_jquery的相关文章

jquery 时间控件-关于jquery时间控件位置放在第一个的问题?

问题描述 关于jquery时间控件位置放在第一个的问题? 日期的输入框放在的div里面的第一个,当页面用dialog弹出这个div时,输入框自动获取到焦点,然后就控件就自己跳出来了.如何处理让弹出这个div时,时间控件没有自己弹出来? 解决方案 时间控件的问题 解决方案二: .bind('focus', function(e) {e.preventDefault();}); 试试这个看看 屏蔽默认的获取焦点事件. 解决方案三: 浏览器不会自动给控件设置焦点的,你肯定是用js设置了焦点,将代码去掉

jQuery EasyUI中的日期控件DateBox修改方法_jquery

jQuery EasyUI中的日期控件DateBox很好用的,首先需要引入jquery文件,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/cs

jquery对所有input type=text的控件赋值实现方法_jquery

如下所示: function resetData() { $("input[type=text]").each( function() { $(this).attr("value",""); } ); } 以上这篇jquery对所有input type=text的控件赋值实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持. 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内容,欢迎继

jQuery树形控件zTree使用小结_jquery

0 zTree简介  树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.  0.0 zTree的特点 •最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery

浅谈EasyUI常用控件的禁用方法_jquery

如下所示: input和textarea: $('#controlid').prop('disabled', true); $('input:not(:button,:hidden)').prop('disabled', true);//禁用除button和hidden控件外的所有input控件 $('textarea').prop('disabled', true); radio和checkbox: $('input:radio[name="radioname"]').prop('d

自己动手写的jquery分页控件(非常简单实用)_jquery

最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了.写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性不知道怎么没时间测试呢.欢迎有同样需求的小伙伴采用,在使用过程发现有问题欢迎提出批评建议.   css: @charset "utf-"; * { margin:px; padding:px; font-family:"微软雅黑";

实例详解jQuery结合GridView控件的使用方法_jquery

jQuery是一种非常强大的客户端JS编程技术,这里不想过多阐述它的相关背景知识,只想简单演示一下如何与asp.net的控件结合开发. 比如,我们要做一个下面如图所示的功能,效果是状态.编号.数字1.数字2.平均值所有的项都是通过后台绑定,如何点击checkbox按钮,来实现自动计算当前行两个数字的平均值呢?前提是用jQuery来实现? 我们直接在页面的Page_Load事件中输入如下代码: protected void Page_Load(object sender, EventArgs e)

基于jQuery的获得各种控件Value的方法_jquery

HTML代码 复制代码 代码如下: <asp:RadioButtonList ID="RadioButtonList1" runat="server"> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>3</asp:ListItem> <asp:ListItem>4&l

使用jQuery判断浏览器滚动条位置的方法_jquery

项目背景 webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现.向下滑动,底部导航出现. 遇到问题 1.我一开始用swipeup和swipedown来做,发现因为有滚动条,不会触发.因此只能判断滚动条是上滚下滚等.关于手机手势,后面的文章会介绍,欢迎关注! 2.通过上滚下滚来让底部导航显示或者因此,安卓上面的浏览器都可以,但是苹果safari会一闪一闪,原因是苹果safari自动有个弹跳效果,导致事件重复执行,解决办法是给上滚下滚一个距离,