1. css 포지션 속성~

강민수·2021년 11월 28일

html&css

목록 보기

2/4

1. position 속성 - relative, absolute, fixed

포지션 속성의 의미

: 포지션 속성이란, 결국 우리가 보는 화면 상의 레이아웃의 위치를 어떻게 배치할 것 인지에 관하여 결정해 주는 것이다. 이 포지션 속성을 정해 주지 않으면, 디폴트 값으로
static이라는 속성이 부여된다. 그래서 우리는 이런 스태틱 속성 외에 다른 속성을 부여해서 위치를 조정시켜야 될 필요성이 있다.

다음은 static 외에 다른 속성들에 대한 내용이다.

1)static: 포지션 속성을 부여하지 않았을대의 디폴트 값.

2)relative: 현재 위치에서 상대적인 offset 속성을 줄 수 있다.

3)absolute: 부모 중 static이 아닌 요소의 위치를 기준으로 상대적인 offset 속성을 줄 수 있다. 하지만, 현재 위치가 변하지는 않는다.

relative와 absolute의 공통점: offset 속성을 부여할 수 있다. 다만, 둘의 차이점: absolute가 이름 때문에 절대적으로 볼 수 있지만, 실상은 다르다. absolute는 offset 속성의 기준이 되는 위치가 조건에 따라서 달라질 수 있다.

4)fixed: 브라우저에 대해서 위치를 잡는다. 스크롤에 영향을 받지 않고 고정된 위치를 가진다. 주로 nav bar 혹은 side var와 같은 메뉴 형태의 경우 fixed 값을 가진다. 이 fixed를 활용하면 웹 상에서 스크롤링을 하더라도 메뉴가 사라지지 않는 장점을 가지고 있다.

Offset 속성
기준이 되는 곳으로부터 얼마나 떨어졌는 지 거리를 정한다.
cf) top, right, bottom, left —px;
Ex) top: 10px; 위에서부터 시작해서 아래로 10px만큼 떨어진 곳을 의미한다.

1. Relative

기본 셋팅 코드:

<html>
<head>
	<title></title>
	<style>
		div {
			width: 100px;
			height: 100px;
		}

		div#a {
			background: #52D4FF;
		}
		div#b {
			background: #FF63EA;
		}
		div#c {
			background: #C5FF63;
		}
	</style>
</head>
<body>
	<div id="a">
		a 영역	
	</div>
	<div id="b">
		b영역
	</div>
	<div id="c">
		c영역
	</div>
</body>
</html>

-> css 적용 전.

-> static은 고정적으로 위치 변화가 전혀 없다.

2. Relative code

div#a {
background: #52D4FF;
position: static;
}
div#b {
background: #FF63EA;
position: relative;  top: 0px;  left: 100px;
}
div#c {
background: #C5FF63;
position: relative;
top: 0px;
left: 200px;
}

position: relative 속성은 static의 원래 위치부터 계산한다.

위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정할 수도 있다.

아래 그림과 같이 b영역은 원래 위치에서 위 0px, 왼쪽 100px 로 위치시켰고,

c 영역은 원래 위치에서 위 0px, 왼쪽 200px 로 위치 시켰다.

3. position: absolute

div#a {
background: #52D4FF;
position: static;
}
div#b {
background: #FF63EA;
position: absolute;  top: 0px;  left: 100px;
}
div#c {
background: #C5FF63;
position: absolute;
top: 0px;
left: 200px;
}
position: absolute 속성은 static이나 relative 와 다르게 바깥 쪽에 공간이 생기지 않는다.

여기서 absolute는 상위 요소인 static 위치를 기준으로 위치가 결정 된다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		div {
			width: 100px;
			height: 100px;
		}

		div#a {
			width: 300px;
			height: 300px;
			background: #52D4FF;
			position: relative;
			top: 100px;
			left: 100px;
		}
		div#b {
			background: #FF63EA;
			position: absolute;
			top: 0px;
			left: 100px;
		}
		div#c {
			background: #C5FF63;
			position: absolute;
			top: 0px;
			left: 200px;
		}
	</style>
</head>
<body>
	<div id="a">
		a 영역	
		<div id="b">
			b영역
		</div>
		<div id="c">
			c영역
		</div>
	</div>
</body>
</html>

위와 같은 경우는 relative (a영역) 안에 설정된 absolute (b영역, c영역) 은 a영역부터 시작해서 위치가 결정됨을 알 수 있다.

4. Fixed

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		div {
			width: 100px;
			height: 100px;
		}

		div#a {
			width: 300px;
			height: 300px;
			background: #52D4FF;
			position: relative;
			top: 100px;
			left: 100px;
		}
		div#b {
			background: #FF63EA;
			position: absolute;
			top: 0px;
			left: 100px;
		}
		div#c {
			background: #C5FF63;
			position: fixed;
			top: 0px;
			left: 200px;
		}
	</style>
</head>
<body>
	<div id="a">
		a 영역	
		<div id="b">
			b영역
		</div>
		<div id="c">
			c영역
		</div>
	</div>
</body>
</html>