top

top 속성에 대한 유틸리티입니다.

요소의 수직 위치를 지정합니다. 이 속성은 position이 지정되지 않은 요소들에는 영향을 미치지 않습니다.

변수 --top, --top-percent는 여기를 참고해주세요.

클래스	약어 클래스	속성
top:0		top: 0 !important;/* 0 */
top:1		top: var(--top-1) !important;/* 0 */
top:2		top: var(--top-2) !important;/* 100px */
top:3		top: var(--top-3) !important;/* 200px */
top:4		top: var(--top-4) !important;/* 300px */
top:5		top: var(--top-5) !important;/* 400px */
top:6		top: var(--top-6) !important;/* 500px */
top:7		top: var(--top-7) !important;/* 600px */
top:8		top: var(--top-8) !important;/* 700px */
top:9		top: var(--top-9) !important;/* 800px */
top:10		top: var(--top-10) !important;/* 900px */
top:1p		top: var(--top-percent-1) !important;/* 10% */
top:2p		top: var(--top-percent-2) !important;/* 20% */
top:3p		top: var(--top-percent-3) !important;/* 30% */
top:4p		top: var(--top-percent-4) !important;/* 40% */
top:5p		top: var(--top-percent-5) !important;/* 50% */
top:6p		top: var(--top-percent-6) !important;/* 60% */
top:7p		top: var(--top-percent-7) !important;/* 70% */
top:8p		top: var(--top-percent-8) !important;/* 80% */
top:9p		top: var(--top-percent-9) !important;/* 90% */
top:10p		top: var(--top-percent-10) !important;/* 100% */
top:1/2		top: 50% !important;
top:1/3		top: 33% !important;
top:2/3		top: 66% !important;
top:1/4		top: 25% !important;
top:2/4		top: 50% !important;
top:3/4		top: 75% !important;
top:1/5		top: 20% !important;
top:2/5		top: 40% !important;
top:3/5		top: 60% !important;
top:4/5		top: 80% !important;
top:-1		top: calc(var(--top-1) * -1) !important;/* 0 */
top:-2		top: calc(var(--top-2) * -1) !important;/* -100px */
top:-3		top: calc(var(--top-3) * -1) !important;/* -200px */
top:-4		top: calc(var(--top-4) * -1) !important;/* -300px */
top:-5		top: calc(var(--top-5) * -1) !important;/* -400px */
top:-6		top: calc(var(--top-6) * -1) !important;/* -500px */
top:-7		top: calc(var(--top-7) * -1) !important;/* -600px */
top:-8		top: calc(var(--top-8) * -1) !important;/* -700px */
top:-9		top: calc(var(--top-9) * -1) !important;/* -800px */
top:-10		top: calc(var(--top-10) * -1) !important;/* -900px */
top:-1p		top: calc(var(--top-percent-1) * -1) !important; /* -10% */
top:-2p		top: calc(var(--top-percent-2) * -1) !important; /* -20% */
top:-3p		top: calc(var(--top-percent-3) * -1) !important; /* -30% */
top:-4p		top: calc(var(--top-percent-4) * -1) !important; /* -40% */
top:-5p		top: calc(var(--top-percent-5) * -1) !important; /* -50% */
top:-6p		top: calc(var(--top-percent-6) * -1) !important; /* -60% */
top:-7p		top: calc(var(--top-percent-7) * -1) !important; /* -70% */
top:-8p		top: calc(var(--top-percent-8) * -1) !important; /* -80% */
top:-9p		top: calc(var(--top-percent-9) * -1) !important; /* -90% */
top:-10p		top: calc(var(--top-percent-10) * -1) !important; /* -100% */
top:-1/2		top: calc(50% * -1) !important;
top:-1/3		top: calc(33% * -1) !important;
top:-2/3		top: calc(66% * -1) !important;
top:-1/4		top: calc(25% * -1) !important;
top:-2/4		top: calc(50% * -1) !important;
top:-3/4		top: calc(75% * -1) !important;
top:-1/5		top: calc(20% * -1) !important;
top:-2/5		top: calc(40% * -1) !important;
top:-3/5		top: calc(60% * -1) !important;
top:-4/5		top: calc(80% * -1) !important;