CSS에서 플로팅 레이어 효과 구현

정의 및 사용법

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

설명

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

기본값:

정적

상속:

아니요

버전:

CSS2

JavaScript 구문:

object.style.position="absolute"

인스턴스

h2 요소 위치 지정:

h2
{위치:절대 ;왼쪽 :100px;
top:150px;
}

TIY

브라우저 지원

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

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

가능한 값

값

설명

절대

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

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

fixed

브라우저 창을 기준으로 위치가 지정된 절대 위치 요소를 생성합니다.

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

상대

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

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

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

inherit

은 위치 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

상속