css position

position을 이용하여 태그의 위치를 원하는 곳에 지정할 수 있습니다.

 

값에 따라서 해당 태그의 위치가 다양하게 위치할 수 있습니다.

 

satatic // 기준 없음, 배치가 불가능함(기본값)

relative // 위치를 자신기준으로 정함

absolute // 부모 요소를 기준으로 배치

fixed // 브라우저(뷰포트) 기준으로 배치

sticky // 스크롤 기준으로 배치

 

<html, css>

<결과페이지>

여기 화면에서 position을 이용해서 block을 위치를 이동해 줄 수 있습니다.

 

block 2번을 오른쪽 제일 아래쪽으로 움직이고 싶다면 아래와 같이 움직일 수 있습니다.

 

<html, css>

 

block 2를 옮기기 전, 어디를 기준으로 옮길지 기준을 정해 주어야 합니다.

 

absolute를 이용해서 기준으로 배치하여야 하기 때문에, 부모 요소를 기준으로 이동해야 합니다.

 

그렇기 때문에 부모요소인 block 1에다가 position: relative를 설정하여, 기준을 만들어 줍니다.

 

그리고 옮기고 싶은 block2를 position: absolute를 주고 위치를 정해줍니다.

 

right: 0; bottom: 0; 을 설정하여서, relative를 준 부모 요소 태그 block 1을 기준으로

 

오른쪽 0, 아래쪽 0의 위치로 옮겨 지게 되는 것입니다.

 

그리고 block요소의 특성상 blcok2의 아래에 block 3이 위치하였는데,

 

blcok2가 absolute가 설정이 되면서 자신이 가지고 있는 공간이 없어져 버리게 됩니다.

 

이 때문에 blcok3이 위로 올라오게 되는 결과가 나타납니다.

 

<결과페이지>