Style position 속성

정의와 사용법

position 요소 정위치 메서드의 유형(정적, 상대적, 절대적 또는 고정적)을 설정하거나 반환하는 속성.

추가로 참조하십시오：

CSS 강의서：CSS 정위치

CSS 참조 매뉴얼：position 속성

인스턴스

예제 1

<div> 요소의 정위치를 상대적 정위치에서 절대적 정위치로 변경합니다：

document.getElementById("myDIV").style.position = "absolute";

직접 시도해 보세요

예제 2

다른 정위치 유형 사용：

function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}

직접 시도해 보세요

예제 3

<h2> 요소의 정위치 반환：

alert(document.getElementById("myH2").style.position);

직접 시도해 보세요

문법

position 속성 반환：

object.style.position

position 속성 설정：

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit"

속성 값

값 설명
static 요소는 문서 흐름에서 등장하는 순서로 표시됩니다. 기본값.
absolute 요소는 그의 첫 번째 정위치된 (비정적) 조상 요소에 대해 정위치됩니다。
fixed 요소는 브라우저 창에 대해 정위치됩니다。
relative

요소는 그의 정상적인 위치에 대해 정위치됩니다。

따라서 "left:20"은 요소의 왼쪽 위치를 20픽셀로 늘립니다。
sticky

요소는 사용자의 스크롤 위치에 따라 정위치됩니다。

sticky 요소는 스크롤 위치에 따라 relative와 fixed 사이에서 전환됩니다。

그것은 시각口中에서 지정된 오프셋 위치에 도달할 때까지 상대적 위치입니다. 그런 다음 그것은 적절한 위치에 "粘"됩니다 (예: position:fixed).

주석：IE/Edge 15 또는 이전 버전에서 지원되지 않습니다. Safari는 6.1 버전부터 Webkit 프리iks를 지원합니다。
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 부모 요소에서 이 속성을 상속받습니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： static
반환 값： 문자열로, 요소의 위치 유형을 나타냅니다。
CSS 버전： CSS2

브라우저 지원

크롬 에지 파이어폭스 사파리 오퍼라
크롬 에지 파이어폭스 사파리 오퍼라
지원 지원 지원 지원 지원