HTML5 CSS - Position

position 속성

 

static

기본,좌표없음

 

 

absolute(절대좌표)

웹브라우저 화면에 좌표가 생김

(left / top / right / bottom)

left / top 을 이용해서 태그를 이동시킬수 있음

한마디로 (0,0) = 웹브라우저 왼쪽/위 모서리부터 시작

참고 : 다른 태그들을 무시함

태그들을 무시함

 

relative(상대좌표)

현재 태그가 있는 위치부터 (0,0)이 시작됨

(left / top / right / bottom)

참고 : 태그가 있으면 밑으로 감

0,0 시작 위치는 태그가 있으면 밑부터

 

부모(relative) 와 자식 (absolute) 활용

자식 div 태그에 absolute의 (0,0)이 웹브라우저가 아닌

부모 div박스의 왼쪽/위 모서리로 변경된다.

안쪽에 들어간것이 확인이 된다. 다른 태그를 넣어도 좌표 수정을 안해도 된다.

 

fixed(고정)

좌표를 사용이 가능하다

(left / top / right / bottom)

단점 : 고정되면 아래 태그가 위로 말려온다

따라서 아래 태그를 margin으로 조금 떨어뜨려주자

스크롤을 사용해도 위에 고정이 됨

 

sticky(고정)

좌표 설정 가능

(left / top / right / bottom)

fixed 의 겹침현상 완화

 

 

z-index

겹칠때 위에 올라오도록 우선순위를 정하는 속성

규칙 : 수치가 클수록 위, 수치가 작을수록 아래

결과

 

참조

웹 브라우저 정중앙에 배치하고 싶다면?

포지션

absolute left : 50% top : 50%

애니메이션 함수

/* 보정 : 박스의 가로/세로 크기의 반만큼 위치 이동해야 중심이 중앙에 배치됨 */

/* 사용법 : transform : translate(가로크기,세로크기) */

transform : translate(-50%,-50%)