position

position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다.
position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다.

오늘 알아볼 포지션의 속성은 총 4가지가 있다!!

static (기본값) :위치를 지정하지 않을 때 사용한다.

relative : 위치를 계산할때 static의 원래 위치부터 계산한다.

absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.

fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다.
브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

오늘은 relative와 avsolute를 알아보려고한다.

글보다는 역시 사진으로 보는 것이 눈에 잘 들어올거 같다!!

우선 relative top, bottom, right, left의 속성을 바꿀 수 있다!!

즉

이렇게 초록색과 파란색 박스에 각각 right : 50px top: 100px을 주었다.

과연 결과는!!!

이렇게 나온 걸 볼 수 있다.

근데 뭔가 이상하다. right에 값을 줬을 때
나는 당연히 오른쪽으로 움직일 줄 알았는데 왼쪽으로 움직였다.🤷‍♂️

파랑 박스도 같은 원리로 위가 아니라 아래로 움직인 걸 볼 수 있다.

이유는 오른쪽으로 움직여라! 가 아닌

오른쪽에서부터 50px 움직인다는 의미이다.

이번 다른 속성 값들도 같은 원리로 움직이는 걸 알 수 있다.

다시 똑같은 도형들이 있다.

<div class="item1">
        <div class="item2">
            <div class="item3"></div>
        </div>
    </div>

이번에는 사각형들이 div안에 상속돼있다.

items2와 item3의 position이 absolute로 바뀐 거 빼고는
똑같은 조건으로 코드를 짜보았다.

내가 생각했던 결과랑 조금 다른 것 같다!!!
빨강이 부모니까... 초록은 빨강색 기준으로 오른쪽에서 50px만큼
간 거는 이해가 되는데..
왜 파랑색도 왼쪽으로 갔을까?

그 이유는!!

위 영상을 보면 초록이의 값이 변할 때 마다 파랑이도 같이
따라서 움직이는 것을 알 수 있다.

<div class="item1">
        <div class="item2">
            <div class="item3"></div>
        </div>
    </div>

앞에서 말했듯이 파랑색은 상위 요소인 초록색을 기준으로
움직이는 것을 알 수 있다.
초록색은 빨강을 기준으로 바로 한 단계 위의 값이
부모가 되는 것이다.

끝!