2022/05/16

jungkwanlee·2022년 5월 16일

코딩일지

목록 보기

35/108

1) 학습한 내용

static

static은 고정적인이라는 뜻이지만, css -position에서는 '원래 위치'란 뜻으로 원래 위치에서 이탈하지 않고, 문서의 흐름을 그대로 따른다는 의미이다. static은 기본값이다. static은 항상 문서 배열 순서를 지킨다. 자기의 주어진 위치를 이탈하지 않고 스크롤해도 모든 것을 그대로 따른다.

	<style>
		div {
			border: 2px solid #CD5C5C;
			position: static;
		}
	</style>
</head>

<body>

	<h1>정적 위치(static position) 지정 방식</h1>
	<div>이 요소는 정적 위치 지정 방식으로 위치를 설정하였습니다.</div>
	<p>정적 위치는 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식입니다!</p>

</body>

</html>

relative

요소를 일반적인 문서 흐름에 따라 배치한다. 요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다. 원래 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다. 위치를 이동하면서 다른 요소에 영향을 주지 않는다. 문서상 원래 위치가 그대로 유지된다.

	<style>
		div.static {
			border: 2px solid #B8860B;
			position: static;
		}
		div.relative {
			border: 2px solid #CD5C5C;
			position: relative;
			left: 30px;
		}
	</style>
</head>

<body>

	<h1>상대 위치(relative position) 지정 방식</h1>
	<div class="static">이 요소는 정적 위치 지정 방식으로 위치를 설정하였습니다.</div><br>
	<div class="relative">이 요소는 상대 위치 지정 방식으로 위치를 설정한 후, left 속성값을 30px로 설정하였습니다.</div><br>
	<p>상대 위치는 해당 HTML 요소의 정적 위치(static position)에 따라 위치를 재조정하는 방식입니다!</p>

</body>

absolute

요소를 일반적인 문서 흐름에서 제거한다. 가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다. 조상 요소 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다. 조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(body요소)를 기준으로 삼는다. (static을 제외한 값) 문서 상 원래 위치를 잃어버린다. (아래에 있는 div가 해당 자리를 차지한다)

	<style>
		div.relative {
			border: 2px solid #B8860B;
			width: 500px;
			height: 200px;
			position: relative;
		} 
		div.absolute {
			border: 2px solid #006400;
			width: 200px;
			height: 100px;
			position: absolute;
			top: 50px;
			right: 0;
		}
	</style>

fixed

fixed는 static과는 달리 완전히 문서의 흐름을 이탈해버린다. fixed를 주면 일반적인 문서 흐름에서 완전히 제외되고 top, right, bottom, left의 주어진 위치에 고정된다. 화면의 특정 위치에 고정되어 스크롤해도 계속 그 자리에 있다.

	<style>
		div.fixed {
			border: 2px solid #B8860B;
			width: 450px;
			position: fixed;
			top: 0;
			right: 0;
		}
	</style>

z-index

position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려간다.

		<style>
			div {
				width: 100px;
				height: 100px;
				position: absolute;
			}
			div.x {
				background-color: #2196F3;
				top: 20px;
				left: 200px;
			}
			div.y {
				background-color: #1976D2;
				top: 50px;
				left: 260px;
			}
			div.z {
				background-color: #0D47A1;
				top: 80px;
				left: 230px;
			}
		</style>
	</head>
	<body>
		<div class="x"></div>
		<div class="y"></div>
		<div class="z"></div>
</body>