offset-position상속 불가애니메이션 허용

사용 가능한 값 타입

• Motion Path Module Level 1

  auto | <position>

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

• <position>

  박스형의 요소에 대한 상대적인 2차원 좌표 값을 나타낸다.

  • CSS Backgrounds and Borders Module Level 3

    [left | center | right] || [top | center | bottom]

    다음과 같이 값이 지정될 수 있다.

    right
    center top

  • CSS Backgrounds and Borders Module Level 3

    [left | center | right | <length-percentage>] [top | center | bottom | <length-percentage>] ?

    다음과 같이 지정될 수 있다.

    right 10%
    15% 100px
    20%

  • CSS Backgrounds and Borders Module Level 3

    [[left | right] <length-percentage>] && [[top | bottom] <length-percentage>]]

    x, y축 위치 값이 순서와 관계없이 모두 작성되어야 하며 각 방향별로 center를 제외한 키워드와 공백 후 실제 <length-percentage> 타입의 값을 지정한다.

    top 10% right -10px

  Details

  포함된 타입

  • <length-percentage>

    <length>와 <percentage> 타입을 나타낸다.

    • CSS Values and Units Module Level 3

      <length> | <percentage>

    Details

    포함된 타입

    • <length>

      숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

      • CSS Basic User Interface Module Level 4

        <length>

      Details

      사용되는 단위

      아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

      • cm

        1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

      • in

        1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

      • mm

        1cm의 1/10 값을 나타낸다.

      • pc

        1in의 1/16 값을 나타낸다.

      • pt

        1in의 1/72 값을 나타낸다.

      • px

        스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

      • Q

        1cm의 1/40을 나타낸다.

      • deg

        보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

      • grad

        400grad(그라디안)은 완전한 원을 만든다.

      • rad

        2π(라디안)이 완전한 원을 만든다.

      • turn

        1turn(턴)이 완전한 원을 만든다.

      • cap

        대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

      • ch

        글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

      • em

        대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

      • ex

        대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

      • ic

        한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

      • lh

        요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

      • rem

        html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

      • rlh

        html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

      • Hz

        1초당 발생한 진동수를 나타낸다.

      • kHz

        1000Hz를 나타낸다.

      • fr

        그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

      • vb

        html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

      • vh

        뷰포트 높이를 상대적으로 1% 높이를 갖는다.

      • vi

        html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

      • vmax

        vw 또는 vh 중 큰 값을 나타낸다.

      • vmin

        vw 또는 vh 중 작은 값을 나타낸다.

      • vw

        뷰포트 너비를 상대적으로 1% 폭을 갖는다.

      • dpcm

        1cm당 점(dot)의 수를 나타낸다.

      • dpi

        1in당 점(dot)의 수를 나타낸다.

      • dppx

        1픽셀(pixel)당 점(dot)의 수를 나타낸다.

      • ms

        1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

      • s

        초를 나타낸다.

    • <percentage>

      어떠한 기준으로 부터 백분율로 표현한다.

  사용되는 키워드

  • bottom

    CSS Values and Units Module Level 4

    기준 위치를 아래쪽으로 한다.

  • center

    CSS Values and Units Module Level 4

    중앙을 기준으로 한다.

  • left

    CSS Values and Units Module Level 4

    기준 위치를 좌측으로 한다.

  • right

    CSS Values and Units Module Level 4

    기준 위치를 우측으로 한다.

  • top

    CSS Values and Units Module Level 4

    기준 위치를 상단으로 한다.

사용되는 키워드

• auto

  가장 가까운  앞쪽 요소가 position 속성 값이 static이거나 relative을 가지면서 블록 레벨인 경우 아래쪽에, 인라인 레벨인 경우 오른쪽에 위치한다.

  Example

  4개의 span 요소 중에서 짝수번째 순서에 해당하는 요소에게 position 속성을 absolute로 설정했다. 그리고 left 속성 값을 모두 기본 값인 auto로 설정했다. auto 값의 결과를 테스트하기 위해 각각 가까운 앞쪽 요소들 중에서 'A' 텍스트가 포함된 요소는 display 속성을 block으로 변경했고 'C' 텍스트가 포함된 요소는 inline을 유지했다.

  그 결과로 'B' 텍스트가 포함된 요소는 'A' 텍스트가 포함된 요소의 아래쪽에 위치를 잡고 있다. 반면 'D' 텍스트가 포함된 요소는 'C' 텍스트가 포함된 요소의 오른쪽에 위치를 잡고 있다.