[TIL] CSS 속성 - position, z-index

이지예·2022년 6월 7일
0

CSS

목록 보기
8/9

POSITION

요소의 위치를 원하는 곳으로 이동 시킬 때 사용하는 속성이다.
이미지 위에 글자를 입히는 등 별도의 레이어가 겹쳐지는 형태나
브라우저 상단에 고정적으로 위치하는 메뉴는 position을 활용하여 만들 수 있다.

정적인 위치, 상대적인 위치, 절대적인 위치, 고정 위치 등이 있다.

position:static;

<div class="static" style="top:40px; right:40px;></div>

position의 기본값. 정상흐름 대로 배열된다.
offset값이 변화는 일어나지 않지만, 값은 선언한대로 들어가게 된다.

position:relative;

<div class="relative" style="top:40px; left:40px;></div>

자기 자신을 상대적으로 움직인다.
top, left 좌표를 기본적으로 0,0 이라고 할 때 (40,40)로 이동한다.

position:absolute;

절대적인 좌표를 갖게 됨으로써 display 값을 block으로 바꾼다.
문서의 흐름을 벗어나게 된다.
조상 요소 중 가장 가까운 요소의 position을 기준으로
조상 요소의 border를 제외한 padding 영역부터 기준점을 갖는다.
inline 요소에 선언하게 되면 display 값이 block으로 변경된다.

position:fixed;

부모 요소의 위치나 문서의 흐름과 상관없이 브라우저의 좌표값을 기준으로 고정된 위치에 있다.
inline 요소에 선언하게 되면 display 값이 block으로 변경된다.

Z-INDEX

box가 겹치는 순서를 지정할 때 사용하는 속성이다.
position값이 static이 아닌 경우 지정 가능하다.
순서값이 없을 경우 생성순서(코드상 순서)에 따라 쌓인다.
부모가 z-index 값이 있을 경우 부모 안에서만 의미 있다.
큰 값이 가장 위쪽에 위치하고, 음수 사용 가능하다.

0개의 댓글