//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的世界里,控制页面上的控件位置是一项常见的任务。jQuery库提供了一种简单易用的方式来实现这一目标,特别是在动态布局或者交互式设计中。本文将详细讲解如何使用jQuery来设置控件的位置。 ...
### jQuery 获取控件的坐标位置 #### 知识点概览 在网页开发过程中,经常需要获取页面元素的坐标位置,以便实现特定的功能,如弹窗定位、元素拖拽等。jQuery 提供了一系列方法来方便地获取这些坐标值。本文将详细...
标题中提到的"jquery jquery控件 时间控件 时分秒控件",主要指的是那些允许用户以"2012-5-12 17:52:52"这种格式选择具体时间的插件。这种格式遵循ISO 8601标准,包含年、月、日、小时、分钟和秒。与"2012-5-22 00:...
而"jquery时间控件时分秒"是jQuery的一个扩展插件,用于创建用户友好的时间选择器,帮助用户方便地输入或选择时间,通常用于表单中的时间输入字段。这种控件在许多场合都非常实用,比如预订系统、日程安排或时间跟踪...
jQuery时间控件是一种流行的前端解决方案,它可以帮助开发者快速集成时间选择功能,使得用户界面更加友好。这篇文章将详细介绍jQuery时间控件的使用方法、优势以及相关知识点。 一、jQuery时间控件简介 jQuery时间...
3. **初始化时间控件**:在jQuery的`$(document).ready()`函数中,使用`.timepicker()`方法初始化时间控件,并根据需要设置选项。 ```javascript $(document).ready(function () { $('#timepicker').timepicker({ ...
本主题将深入探讨jQuery中的时间控件和日期控件,这些组件在创建交互式用户界面时非常有用,特别是在处理表单输入或日历功能时。 1. **jQuery UI Datepicker** jQuery UI 提供了一个名为 "Datepicker" 的插件,它...
综上所述,通过结合jQuery Treeview、jQuery UI和自定义JavaScript代码,我们可以实现拖动修改的各种特效,从而创建一个动态、交互性强的树形控件。这个功能对于需要用户自由调整布局的应用场景特别有用,如文件管理...
而"jQuery 日期时间控件"则是基于jQuery构建的,用于帮助开发者在网页上添加用户友好的日期和时间选择功能。这类控件通常提供交互式的日历视图和时间选择器,使得用户可以方便地输入或选择日期和时间,避免手动输入...
【jQuery日期控件详解】 在Web开发中,日期选择器是一种常见的交互元素,它使得用户能够方便地输入或选择日期。jQuery,作为一个广泛使用的JavaScript库,提供了丰富的插件来实现这种功能。本篇文章将深入探讨名为...
**jQuery Datepicker 知识详解** jQuery UI 是一个强大的用户界面库,其中包含了许多实用的组件,其中之一就是日期选择器(Datepicker)。本篇文章将深入探讨这个功能丰富的日期控件,帮助你更好地理解和运用它。 ...
《jQuery表格控件深度解析与应用实践》 在Web开发领域,jQuery表格控件作为一款功能强大的工具,深受开发者喜爱。其丰富的特性、高效的性能以及易于使用的API,使其成为实现数据展示、操作和管理的理想选择。本文将...
标题中的“带时间的jQuery日期控件代码”指的是一个JavaScript库,特别地,它是基于jQuery的一个组件,用于在网页上创建具有时间和日期选择功能的输入控件。这种控件通常用于用户需要输入特定日期和时间的场景,比如...
这里我们将深入探讨jQuery中的日历控件,尤其是涉及到“时分秒”功能的实现,以及相关的插件。 标题提到的“jquery 日历控件 时分秒”指的是在网页上集成的日历组件,不仅能够选择日期,还能选择具体的时间,包括...
在jQuery中实现时间控件可以提高用户体验,使得时间选择更加直观和便捷。 首先,我们需要了解jQuery的时间控件主要有两种类型:下拉式时间和滑动式时间选择器。下拉式时间控件通常由小时和分钟的下拉菜单组成,用户...
"jQuery验证控件"是将jQuery与表单验证功能相结合的一种实现方式,旨在提供更灵活、用户友好的验证体验。 jQuery验证控件通常包括以下核心组件和特性: 1. **验证插件**:jQuery提供了许多验证插件,如jQuery ...
1. **jQuery插件开发**:这个时间控件可能是基于jQuery的一个自定义插件,允许开发者通过简单的调用来实现时间选择功能。jQuery插件通常包含初始化、事件处理和方法调用等部分,使得代码复用和扩展变得简单。 2. **...
JQuery日历控件是一种广泛应用于网页开发中的交互式组件,它允许用户通过直观的日历界面选择日期。这种控件通常由JavaScript库JQuery提供支持,以增强网页的用户体验,尤其是涉及日期输入或日程安排的功能。在本篇...
2. **样式**:CSS用于设置控件的基本样式,包括按钮、选项列表和选中状态的样式。 3. **交互**:JavaScript处理按钮的点击事件,以及键盘事件,使用户能够通过键盘导航选项。 4. **数据绑定**:如果下拉选项来自...
本篇文章将深入探讨jQuery控件及其在实际项目中的应用。 jQuery控件是基于jQuery库的扩展,提供了一系列预先封装好的UI组件,如日期选择器、滑块、下拉菜单等,这些控件通常用于构建交互性强、用户体验良好的Web...