position-relative

문장은 그냥 네이버에서 아무문장이나 주워왔다

모든 요소는 기본적으로 position: static; 이다 (기본값)

position: relative; top:30px;

볼드한 b 태그에 position을 relative로 설정한 후 top 30px을 하면

살짝 이상한 형태가 된다 ㅎㅎ

relative는 상대적인 이란 뜻이다 원래 있어야할 자리에서 이동해서 위로 30px의 공간을 주게된다

여기에

left: 50px

까지하면

왼쪽에 50px 의 간격이 있도록 한다

이방식이 margin이랑 다른 점은?

margin-top:30px; margin-left:50px;

왼쪽으로 간격이 띄어지긴 했는데 다른 친구들도 같이 맞춰서 움직이게 된다

위처럼 position: relative top 30px left 50px 할경우 원래있던 애들은 가만히 있고 원래 있어야할 자리에서 정한 수치값대로 공간이 생긴다

whisky가 원래 있어야 할 위치는 그냥 비어있다 ㅎㅎ

요소들이 겹치는 레이아웃을 짤 떄는 position을 반드시 사용해야 한다