>웹 프론트엔드 >JS 튜토리얼 >jquery_jquery에서 컨트롤 위치를 설정하는 방법

jquery_jquery에서 컨트롤 위치를 설정하는 방법

WBOY
WBOY원래의
2016-05-16 17:24:501261검색

순수 JS 작성 방법:

코드 복사 코드는 다음과 같습니다.

문서 .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; ").position().left;

//unamespan 좌표를 기준으로 panel2의 위치 설정
$("#panel2").css({position: "absolute",'top ' :offsettop 100,'left':offsetleft 50,'z-index':2});

먼저 컨트롤의 위치 속성을 설정해야 합니다.
위치 속성은 요소의 위치 지정 유형 이 속성은 요소의 레이아웃을 설정하는 데 사용되는 위치 지정 메커니즘을 정의합니다. 모든 요소를 ​​배치할 수 있지만 절대 또는 고정 요소는 요소 자체의 유형에 관계없이 블록 수준 상자를 생성합니다. 상대적으로 배치된 요소는 일반 흐름의 기본 위치에서 오프셋됩니다.
속성 설명:
1 절대: 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정된 절대 위치 지정 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
2 고정은 브라우저 창을 기준으로 절대 위치에 있는 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

3 상대 요소는 일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다. 따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.

4개의 정적 기본값. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다.

5 상속은 위치 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다. (이 속성은 IE에서는 지원되지 않습니다)

모든 공간 위치의 기본값은 정적이므로 위치 지정을 위해 다른 속성으로 설정해야 합니다

여러 레이어가 있고 레이어의 계층 관계를 설정해야 하는 경우 Z-index 속성을 설정해야 합니다

z-index 속성은 요소의 스택 순서를 설정합니다. 더 높은 스택 순서를 가진 요소는 항상 더 낮은 스택 순서를 가진 요소 앞에 나타납니다.

참고: 요소는 음수 Z-색인 속성 값을 가질 수 있습니다.

참고: Z-색인은 위치가 지정된 요소에서만 작동합니다(위치 값은 정적이지 않습니다)!

설명

이 속성은 표시 영역에 수직으로 확장되는 축으로 정의되는 z축을 따라 배치된 요소의 위치를 ​​설정합니다. 양수이면 사용자에게 더 가깝고, 음수이면 사용자에게서 더 멀어집니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.