position 그리고 top, bottom, right, left

position

요소의 위치 지정 방법의 유형(기준)을 설정

 

속성 값

값	의미	기본값
static	유형(기준) 없음/ 배치 불가능	static
relative	요소 자신을 기준으로 배치
absolute	위치 상 부모 요소를 기준으로 배치
fixed	브라우저(뷰포트)를 기준으로 배치
sticky	스크롤 영역 기준으로 배치

 

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

.parent{
  width: 400px;
  height: 300px;
  border : 4px dashed lightgray;
  position: relative;
}

.child{
  width: 150px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  position: absolute;
  /* absolute는 부모요소 기준을 배치되기 시작한다 라는 뜻이다 */
  top: 50px;
  left: 100px;
}

position: absolute;는 부모 기준으로 배치된다는 뜻이므로, 다음소스코드

top은 부모요소 기준으로 위에서 50px 떨어지는것이고

left는 부모요소 기준으로 왼쪽에서 100px 떨어지는 것이다.

position: absolute를 이용하여 위치 지정

 

1. top (속성)

요소의 position 기준에 맞는 '위쪽'에서의 거리(위치)를 지정

값	의미	기본값
auto	브라우저가 계산	auto
단위	px, em, cm 등 단위로 지정	0
%	부모(위치 상의 부모(조상)) 요소의 세로 너비의 비율로 지정, 음수 값 허용

 

 

2. bottom (속성)

요소의 position 기준에 맞는 '아래쪽'에서의 거리(위치)를 설정

값	의미	기본값
auto	브라우저가 계산	auto
단위	px, em, cm 등 단위로 지정	0
%	부모(위치 상의 부모(조상)) 요소의 세로 너비의 비율로 지정, 음수 값 허용

 

3. left (속성)

 

요소의 position기준에 맞는 '왼쪽'에서의 거리(위치)를 설정

값	의미	기본값
auto	브라우저가 계산	auto
단위	px, em, cm 등 단위로 지정	0
%	부모(위치 상의 부모(조상)) 요소의 가로 너비의 비율로 지정, 음수 값 허용

 

 

4. right (속성)

요소의 position기준에 맞는 '오른쪽'에서의 거리(위치)

값	의미	기본값
auto	브라우저가 계산	auto
단위	px, em, cm 등 단위로 지정	0
%	부모(위치 상의 부모(조상)) 요소의 가로 너비의 비율로 지정, 음수 값 허용

를 설정