CSS 오프셋 포지션 속성

정의와 사용법

offset-position 속성이 요소가 경로 위에 있는 초기 위치를 지정합니다。

만약 offset-path 함수가 자신의 시작 위치를 지정하지 않으면 offset-position 의 값이 요소가 이동 경로를 따라 이동할 때 초기 위치를 결정합니다。

예제

예제 1

지정된 요소의 초기 위치는 오른쪽 하단에 있어야 합니다：

#square {
  width: 60px;
  height: 60px;
  background: blue;
  offset-position: bottom right;
  offset-path: ray(45deg);
}

직접 시도해 보세요

예제 2

다른 초기 위치를 확인하세요:

#square1 {
  width: 40px;
  height: 40px;
  background: pink;
  text-align:center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: red;
  text-align:center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: yellow;
  text-align:center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: cyan;
  text-align:center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavendar;
  text-align:center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

직접 시도해 보세요

CSS 문법

offset-position: auto|normal|position|initial|inherit;

속성 값

값 설명
normal 초기 위치를 포함 블록의 50% 50%에 설정합니다. 기본 값.
auto 초기 위치를 요소의 상자의 왼쪽 상단에 설정합니다。
position

x/y 좌표를 지정하여 요소를 그 블록의 경계에 대한 위치에 배치합니다。

위치를 정의하기 위해 1에서 4개의 값을 사용할 수 있습니다。
initial 이 속성을 기본 값으로 설정합니다. 참고: initial。
inherit 이 속성을 부모 요소에서 상속합니다. 참고: inherit。

기술 세부 사항

기본 값: normal
상속성: 아니요
애니메이션 제작: 지원. 참고:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.offsetPosition="auto"

브라우저 지원

표格에서의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다。

크롬 에지 파이어폭스 사파리 오페라
116 116 122 16 102

관련 페이지

교육:SVG 경로

교육:CSS 애니메이션

참조:CSS 오프셋 속성

참조:CSS 오프셋 앵커 속성

참조:CSS 오프셋 거리 속성

참조:CSS 오프셋 경로 속성

참조:CSS 오프셋 루프 속성