CSS 포지션

positon relative 는 요소가 있었던 위치를 기준으로 움직인다고 생각하면 됨 

 

양수를 적는다면  경계를 기준으로 안쪽으로 움직이고

음수를 적는다면 경계를 기준으로 바깥으로 움직임

 

음수로 적어봄 

 

 

 

양수로 적어봄 

 

 

 

안쪽으로 움직이는거 알수 있음 

대체 왜 이렇게 만들었는지 이해불가임 

 

 absoulate

부모요소중에 relative 요소를 찾고  relative  부모를 기준으로 움직임

부모 컨테이너중에 relative 가 하나도 없으면 body 기준으로 움직임

 

 

해보자

 

 

 

 

3번 컨테이너 사라짐  뭐지?

 개발자 도구를 보니 2번 뒤에 3번 div 박스가 있당

 

그다음 top left 줘봅시다

 

 

 

부모 컨테이너인 position relative 가 없으니 body 기준으로 하게 됨  음수 값을 주니 경계선 기준 바깥으로 가게되니  구석탱이에 가게 된것  그럼 음수를 줘보자

음 안쪽으로 잘 이동하였다 

 

 

부모 div 에

   position: relative;

를 써보자

        position: absolute;

        top: 10px;

        left: 10px;

top left 10px 10px 으로 바꿈 

 

 

빨간선 body 기준으로 10px 10px 안쪽으로 이동 된걸 알수 있음 

 

 

position fixed 고정역활

사용자의 화면을 기준으로 해서 움직임

 

상단 고정바 네이버 검색 상단부도 스크롤 내려도 그대로 유지되면서 내려옴 

3번 div 에 fixed 줌

 

 

 

스크롤을 내려도 3번 div 는 계속 내려오는걸 알수 있음 

아 -- 힘들어 ;;