Position , Z-index(CSS),viewport

모든 태그들의 기본 position 값은 static

position:relative

1. 자기 자신이 있는 위치를 기준으로 top botton left right 움직인다.
어떤 요소에게서도 영향을 끼치지 않는다.

 

*right 에서 200을주면 200만큼 오른쪽에서 떨어진다

*left 200을주면 왼쪽에서 200 떨어지는 것.

---

 

position:absolute

1. 자신이 기준으로 삼고 싶은 기준점을 새로 정 할 수 있음  ( 그 기준점을 잡고 위치를 조정한다 ).
2.자신의 조상요소들 중에서 position : static값이 아닌 요소를 기준으로 잡고 움직인다.

4. 자식이 집을 나감
5. display : block 됨. (크기 조정만 가능)
padding margin top left right border

position:absolute

 

만약 조상과 부모 둘다 position:relative 이렇게 설정이 되었다면
바로 위에있는 계층 부모를 기준으로 삼는다.

 

 

---

 

position:fixed

1. viewport 를 기준으로 움직인다.
2. 자식이 집을 나감
3. display : block 됨. (크기 조정만 가능)
padding margin top left right border
4. fixed 를 주었을 경우자기자신이 가지고 있는 content-box 사이즈 만큼 줄어 들게 된다(width 를 주지 않았을 경우).

4번

viewport 기준

top: 50%
left : 50%
하지만 꼭짓점만 중앙에 온걸 확인 할 수 있다 이럴 때 위치를 조정하는 것이 바로 아래 링크.
parkjaeho.tistory.com/64

transform: translate(X|Y)

viewport  란 ? 브라우저 창의 전체 크기

 

viewport

iPhoneX viewport 

---

z-index