[포트폴리오] ul 속 li 태그의 position:relative 적용하기

block요소(li) 정렬 시,

맨 위 요소에 position:relative; top:00px; 을 주면

아래의 요소들은 00px 만큼 움직이지 않은 채로, 그 자리에 있기 때문에

상자가 겹치게 된다.

 

결론: li끼리의 간격 조정은 margin을 사용하자.

 

 

li정렬 관련 포스팅

https://gsdays.tistory.com/59

ul속 여러 개의 li를 화면 가운데 정렬 (block요소 가운데 정렬)

 

자주 사용하게 되는 형태

block요소들을 아래로 배치할 때

맨 위의 요소에 원하는 만큼 margin-top을 주고

아래 요소들에는 position:relative; top:0px;을 준다.

 

초록색 부모div 안에 들어있는 4개의 div

.big {width:200px; height:300px; border: 5px solid green;}
.first {width:100px;height:50px;margin-top:80px; position:relative; top:0; border:2px solid red;}
.second {width:100px;height:50px;position:relative; border:1px solid black;}
.third {width:100px;height:50px;position:relative; border:1px solid black;}
.fourth {width:100px;height:50px;position:relative; border:1px solid black;}

 

 

 

관련포스팅

 

ul속 여러 개의 li를 화면 가운데 정렬 (block요소 가운데 정렬)

 

https://gsdays.tistory.com/47

내가 보려고 만든 position 완전히 이해하기