CSS 포지션 (3)_원하는 위치에 딱 배치하기!

저번에 다뤘던 것에 이어서 포지션에 대해서 더 알아보았다.

 

간단하게 복습하면

 

HTML요소의 좌표 기준은 항상 왼쪽 상단의 꼭지점이 기준이다.

그래서 top, bottom, left, right에 값을 넣어 주면

그 기준이 해당 값에 배치가 된다.

(top: 50%, left: 50% - 왼쪽 상단 꼭지점이 그 좌표에 배치)

 

포지션을 정해줄 때 값을 px 등의 절대적인 값과 %등의 상대적인 값을 넣어 줄 수 있는데

이는 역시 입맛에 맞춰서 넣어주면 된다.

 

 

예를 들어서 '나는 이것을 부모요소의 정 가운데에 항상 위치시키겠어!'

라는 의도로 값을 넣는다면, 부모요소의 크기에 따라서 해당 요소가 바뀌면 안된다.

 

이러한 경우 % 와 같은 상대적인 값을 사용하면 어떤 상황에도

의도한 위치에 배치를 할 수 있을 것이다!

 

 

예시

저번에 다루었던 '정가운데 배치'에 이어서

부모요소의 바깥부분에 딱 맞춰서 배치하는 것을 해보았다.

<div class="parent">
    <div class="child"></div>
</div>

 

.parent {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #000;
}
.child {
    position: absolute;
    background-color: steelblue;
    width: 100px;
    height: 100px;
	left: 0;
    top:100%
}

요소를 부모요소의 왼쪽 하단 부분에 딱 맞춰서 배치를 하기 위해서

top: 100%를 넣어주었다.

즉, 부모요소의 높이값을 항상 넣어주는 것이다.

 

따라서 부모요소의 height가 바뀌어도 왼쪽 하단에 붙어있게 할 수 있다.

부모요소의 height를 줄인 모습

 

아래와 같이 다양하게 배치할 수 있다.

top: 0 left: 100%

top: 100% left: 100%