본문 바로가기
front-end/css

CSS 포지션 static과 relative

by Dreaming Coder 2021. 1. 2. 09:19

 


이 포스팅은 PC로 작성되었습니다.

모바일로 보시는 분들에게는 가끔

줄 바꿈이 어색하게 보일 수 있습니다.

 


 

 

 

지난 포스트

 

CSS 마진 겹침

이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 박스 사이징 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분

gogogameboy.tistory.com

 

 

 

 

 

 

position: relative

 

위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.

 

 

CSS에 position 값을 따로 주지않으면 기본적으로 static으로 설정이 됩니다.

position 값을 relative로 줘야 박스의 위치를 지정할 수 있습니다.

left와 right가 같이 들어가면 left만 따르며, top과 bottom이 같이 들어가면 top만 따릅니다.

이 위치 지정 방법은 부모에 대해서 상대적으로 지정하는 방법입니다.

 

 

 

 

 

 

다음 포스트

 

CSS 포지션 absolute

이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 포지션 static과 relative 이 포스팅은 PC로 작성되었습니다. 모바일로

gogogameboy.tistory.com

 

 

 


이 글이 도움이 됐다면 하단의 공감 버튼을 꾹 눌러서
빨간 하트로 만들어주세요.

(비로그인도 가능합니다!!)
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.

 


 

'front-end > css' 카테고리의 다른 글

CSS 포지션 fixed  (0) 2021.01.02
CSS 포지션 absolute  (0) 2021.01.02
CSS 마진 겹침  (0) 2021.01.01
CSS 박스 사이징  (0) 2021.01.01
CSS 박스 모델 (padding, margin)  (0) 2021.01.01

댓글