Home > Web Front-end > JS Tutorial > How to set the position of a control in jquery_jquery

How to set the position of a control in jquery_jquery

WBOY
Release: 2016-05-16 17:24:50
Original
1261 people have browsed it

Pure JS writing method:

Copy code The code is as follows:

document.getElementById(" child").style.left="800px";
document.getElementById("child").style.top="200px";*/

//offset() gets the position of the current element based on browsing
var offsettop=$("#unamespan").offset().top;
var offsetleft=$("#unamespan").offset ().left;
//position() obtains the position of the current element based on the parent container       
  var positiontop=$("#unamespan").position().top; #unamespan").position().left;

//Set the position of panel2 based on the coordinates of unamespan
$("#panel2").css({position: "absolute",'top' :offsettop 100,'left':offsetleft 50,'z-index':2});

First you need to set the position attribute of the control
The position attribute specifies the positioning type of the element. This attribute Defines the positioning mechanism used to establish the layout of elements. Any element can be positioned, but absolute or fixed elements generate a block-level box, regardless of the type of the element itself. A relatively positioned element is offset from its default position in normal flow.
Attribute description:
1 absolute: Generate an absolutely positioned element, positioned relative to the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.
2 fixed generates absolutely positioned elements, positioned relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

3 relative generates a relatively positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position.

4 static default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

5 inherit specifies that the value of the position attribute should be inherited from the parent element. (This attribute is not supported in IE)

The default value of all spatial positions is static, so it needs to be set to other attributes for positioning

If there are multiple layers and you need to set the hierarchical relationship of the layers, you need to set the z-index attribute

The z-index attribute sets the stacking order of elements. Elements with a higher stacking order will always appear in front of elements with a lower stacking order.

Note: Elements can have negative z-index attribute values.

Note: Z-index only works on positioned elements (the value of position is not static)!

Description

This attribute sets the position of a positioned element along the z-axis, which is defined as the axis extending vertically to the display area. If it is a positive number, it is closer to the user, and if it is a negative number, it is further away from the user.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template