본문 바로가기
Dev/React

CSS margnin padding ,position

by 컴포넌트설계자 2026. 3. 25.

margin : 20px -> 상화좌우

margin : 20px 10px;
               상하   좌우
margin : 20px 10px 5px ;
               상      좌우  하
margin : 20px 10px 5px 3px
               상      우    하      좌

top bottom은 큰 숫자값으로 결정이 된다.

 

position: relative; 설정하면 그 다음에 놓이는 요소는 어디에 놓일까?
relative를 설정한 요소가 원래 놓여야 할 위치를 계산하고 그 뒤에 놓인다.         
position: absolute; 설정하면 그 다음에 놓이는 요소는 어디에 놓일까?
         position: absolute;를 설정한 요소를 전혀 신경쓰지 않고 없다 생각하고
         놓여야할 위치에 놓인다.         z-index는 position이 설정된 요소들이 겹쳐 있을 때 요소들의
         레이어 순서를 결정한다. 기본값은 0이고 숫자가 클수록 맨위에 올라간다.