<CSS>HTML 태그의 이동 : position

*  태그의 이동 :

1. 테트리스 : 한 공간에 퍼즐을 맞추는 배치 

2. 화면상의 위치이동 

* CSS버전별 태그의 이동. 

- CSS1~ CSS2 : float, position (좌표, 범위구석 x, 공간)

* 다른 태그들의 영향의 변수가 너무 커서 어렵다. 

- CSS 3 : flex (유연, 모바일, 반응앱) - 실무에서 못 씀 . explorer 11에서만 작동하기 때문에 워낙 최신이다. 

1. position : 태그를 같은 평면에서 위치를 움직인다. ( 이동 ) 다른 태그 덮을 수 있음. 

1) 상대적 (relative)

2) 절대적 (absolute)

3) position 을 사용하면 그 후 부터 top, left, .. 등 방향속성을 사용할 수 있다. 

 *ex)  position : relative (or) absolute ; top : 50px;

2. relative

 : 원래 갖고 있던 자리는 그대로 기억하고 그 위치를 기준으로 움직인다. ( 기준 갱신 x)  

누군가를 밀지 않고 덮음. 배치의 개념이 아닌 화면상에서 이동의 개념

* 원래 있던 자리가 사라지지 않는다. 

                (~ 방향으로 ~ 크기의 공백을 만든다!)

1) 선언 방식 : CSS 속성

position : relative ; 방향 : 이동거리; 

//

box2 -> box1 순서로 작성했다. 

box2 

(1) 왼쪽에 20px 짜리 공간 만들기 ->오른쪽으로 20px 이동

(1) box1(연분홍색) 왼쪽에 50px 짜리 공간 생성 -> 오른쪽으로 50px 이동

(2) box1 위에 50px 짜리 공간 생성. -> 아래로 50px 이동

( 겹친다)

(3) top : -20px -> - 기호는 반대 방향으로의 실행을 의미한다 즉 아래에 20px 짜리 공간 만들기 -> 위로 20px 이동 

( 이 이동은 기존에 있었던 위치가 아니라 기존에 위치에서 다시 시작한다. )

(3) 처음의 위치에서  아래에 20 px 짜리 공간 만들기 - > 위로 20px 이동

3번의 top : -20px 와 같다. 

: 보통 left, top으로 -를 섞어가며 표현한다. 

* (3) 까지만 하고 bottom : 30px를 줬을 때 - (3) 번과 같은 결과가 나온다. 이유 질문 ( 내 생각 : bottom 이 top보다 우선순위가 낮기 때문?)  

3.  absolute

: 기준은 화면 전체이다. 

position : absolute; 를 명령하는 순간 block들이 가장 왼쪽, 위쪽으로 이동한다. 그 곳부터 화면 전체를 기준으로 절대적으로 움직인다. 기존의 위치는 사라진다. 한 포지션의 이동거리가 달라지면 누적이 아니고 새로 그 거리를 가진다.

1) 단순 absolute

* right : 0px; left : 0px;  - 해당 태그가 없어진다. 

2) 박스 안의 absolute

: 시작 위치는 박스 안이다. 하지만 방향과 이동거리를 설정할 경우 박스에 구애받지 않고 자유롭게 움직인다. 

3) 포지션이 있는 박스 안의 absolute 

- parent 에 position (absolute) 를 줄 경우 : 가장 가까운 부모태그부터 position이 있나 찾아본다. 없다면 자유롭게 전체화면을 기준으로 이동하고, 있다면 position이 있는 가장 가까운 부모의 영역 안을 기준으로 움직인다. 

parent

(1) 가장 가까운 부모태그인 grand가 position이 있나 확인 -> 없음. 이동 기준 : 전체화면

(1) parent에 position : absolute; 가 지정된 직후는 까만 grand 태그안에 들어가 있었을 것이다. 

(2) parent에 이동 위치, 거리가 설정되면 화면 전체를 기준으로 그곳으로 이동한다 

box3

(1) 가장 가까운 부모태그인 parent가 position이 있나 확인 -> 있음. 이동기준 : parent태그의 영역 

(2) parent태그 영역 기준으로 left : 0px; top : 20px; 

4) parent가 아닌 grand 에 속하고 싶은 box3

 : 코드 구성을 바꿔줘야 한다. 

1) grand에 position을 준다 ( parent도 grand에 속하게 됨)

2) box3태그를 parent밖, grand안으로 넣어준다.