CSS_javascript 팁에서 위치 속성을 설정하여 레이어 위치를 수정하세요.

정의 및 사용법

위치 속성은 요소의 위치 지정 유형을 지정합니다.

설명

이 속성은 요소의 레이아웃을 설정하는 데 사용되는 위치 지정 메커니즘을 정의합니다. 모든 요소를 ​​배치할 수 있지만 절대 또는 고정 요소는 요소 자체의 유형에 관계없이 블록 수준 상자를 생성합니다. 상대적으로 배치된 요소는 일반 흐름의 기본 위치에서 오프셋됩니다.

默认值：	static
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.position="absolute"

예

h2 요소 배치:

h2
 {
 position:absolute;
 left:100px;
 top:150px;
 }
TIY

브라우저 지원

모든 주요 브라우저는 위치 속성을 지원합니다.

참고: 속성 값 "inherit"는 모든 버전의 Internet Explorer(IE8 포함)에서 지원되지 않습니다.

가능한 값

TIY 예시

<테이블 클래스="데이터 입력 가능"> <본체> 값 설명 절대

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정된 절대 위치 지정 요소를 생성합니다.

요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

고정

브라우저 창을 기준으로 절대 위치에 있는 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

친척

정상 위치를 기준으로 상대적으로 배치된 요소를 생성합니다.

따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.

정적 기본값. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다. 상속 는 위치 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

위치 지정: 상대 위치 지정 이 예에서는 일반 위치를 기준으로 요소의 위치를 ​​지정하는 방법을 보여줍니다. 위치 지정: 절대 위치 지정 이 예에서는 절대 값을 사용하여 요소의 위치를 ​​지정하는 방법을 보여줍니다. 위치 지정: 고정 위치 지정 이 예에서는 브라우저 창을 기준으로 요소의 위치를 ​​지정하는 방법을 보여줍니다. 요소의 모양 설정 이 예에서는 요소의 모양을 설정하는 방법을 보여줍니다. 요소가 모양에 잘려 표시됩니다. Z-indexZ-index는 한 요소를 다른 요소 뒤에 배치하는 데 사용할 수 있습니다. Z-색인 위 예의 요소는 Z-색인이 변경되었습니다.

CSS의 Position 속성을 소개하겠습니다

CSS 위치는 매우 중요하며 정적, 상대, 절대, 고정 값을 갖습니다.

<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>

정적: 정적 위치 지정. position 속성을 설정하지 않으면 기본값은 static입니다. 위쪽, 왼쪽, 아래쪽 및 오른쪽과 같은 속성은 정적일 때 유효하지 않습니다. 이러한 속성을 사용하려면 위치를 다른 세 가지 값 중 하나로 설정해야 합니다.

상대적: 상대 위치 지정. 요소는 정적으로 배치되었을 때의 위치로 조정됩니다. 정적 위치 지정에서 요소에 할당된 공간은 해당 공간을 채우기 위해 요소에 더 가까이 이동하지 않습니다. 그러나 그들은 또한 요소의 새로운 위치에서 밀려나지 않을 것입니다. 절대: 절대 위치 지정. 예를 들어, 요소가 절대 위치에 있는 다른 요소 내에 중첩되어 있으면 해당 요소를 기준으로 위치가 지정됩니다. 고정: 위치가 고정되었습니다. 요소는 브라우저의 고정 위치로 설정되며 다른 요소와 함께 스크롤되지 않습니다. 비유적으로 말하면, 스크롤바를 위로 올리거나 아래로 당겨도 화면에서 고정된 요소의 위치는 변하지 않습니다. IE6은 이 속성을 지원하지 않는다는 점에 유의하세요. 참고: 이러한 방식으로 많은 웹페이지가 중앙에 배치되면 다양한 해상도에서 디스플레이에 편차가 발생합니다. 이 경우 다음과 유사한 방법을 통해 처리할 수 있습니다. 🎜>