Properties

Properties

Draft
  • account_tree
  • bug_report

position

요소의 출력 위치 결정 방식을 정의한다.

설명

기본적으로 요소는 static 값을 갖는다. 즉 마크업 순서에 따라 요소의 특성에 맞게 화면에 출력이 된다. 그러나 기본 값이 아닌 relative, absolute, fixed 값을 갖는 경우에는 화면에 출력되는 위치는 별도의 위치 속성(top, right, bottom, left) 값을 통해서 출력 위치를 지정할 수 있다.

설정 가능한 속성 값

  • static기본값키워드CSS2

    기본 값이며 마크업 순서대로 요소가 가지고 있는 기본 적인 속성에 따라 위치를 잡는다.

  • absolute키워드CSS2

    기본적으로 위치를 지정하는 left, top, right, bottom 속성 값을 통해 웹브라우저 뷰포트 기준으로 위치가 지정된다. 부모 요소가 존재하는 경우 부모의 position 속성 값이 relative이거나 fixed인 경우 부모 요소로부터의 절대적 위치를 갖지만 부모 요소의 position 속성 값이 기본 값인 static 이거나 하위 요소가 position 값을 fixed로 갖는 경우에는 부모 요소와 관계없이 웹브라우저의 뷰포트를 기준으로 위치가 결정된다.

  • fixed키워드CSS2

    요소는 웹브라우저 뷰포트 내에서 top, right, bottom, left 와 같은 위치 속성 값을 통해 절대적 위치를 갖고 고정되어 스크롤되지 않는다.

  • relative키워드CSS2

    직전의 요소가 position 속성 값이 static 인 요소가 있다면 그 요소를 기준으로 위치값을 갖는다. right, bottom 속성 값을 가질 수 없다.

  • sticky키워드CSS3

    요소를 일반적인 흐름에 배치하고 테이블 관련 요소를 포함해 가장 가까운 스크롤되는 조상과 블록 레벨 조상을 기준으로 top, right, bottom left 값에 따라 오프셋을 적용한다.

    sticky 값 사용 생플 코드

  • initial키워드CSS3

    CSS 기본 값으로 설정한다.

구문

  • position static or absolute or fixed or relative or initial;기본형식CSS2

    요소의 위치 지정 방식을 주어진 상수로 설정을 한다.

  • object.style.position = "relative";자바스크립트 형식CSS2

    자바스크립트 형식

테스트 도구

요소에 대한 position 테스트

지원 웹브라우저