[TIL]relative 포지션

relative 포지션

position 속성

• 일반적으로 position 선택을 하지않으면 position: static으로 설정된다.
• position: static; 은 원래 있어야할 위치에 배치한다.

relative 포지션

• position: relative 를 하면 원래 있어야할 위치에서 유동적으로 변한다.
• top: 30px; 을하면 위로 30px의 간격이 있게 한다.
• left: 30px; 을하면 왼쪽으로 30px 간격을준다.

margin과의 차이점

margin 을 하면 움직이긴하지만 다른 텍스트도 함께 움직인다. 하지만 relative는 다른 텍스트들은 원래 위치에 그대로 있는데 relative한 텍스트만 움직이게 되고 원래있던 위치는 비어지게 된다.요소들이 겹치는 레이아웃을 하고싶을때에는 position 속성을 쓴다.