Notice
Recent Comments
Recent Posts
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Today
Total
관리 메뉴

기록 ＞ 기억

[CSS] position 속성 / z-index 속성 본문

IT국비지원

[CSS] position 속성 / z-index 속성

BY SON 2021. 9. 2. 23:57

position 속성 → 배치 방법

 

속성 명 속성 값
static 문서의 흐름에 맞게 배치
 relative  요소 본인 위치 기준으로 배치
 absolute  1. 브라우저 창 기준
2. 부모 요소 중 position: relative; 를 가진 부모 요소 중 가장 가까운 부모 기준으로 배치
fixed 지정한 위치에 고정 배치 (화면에서 요소가 잘릴수 있음)

 

● relative (본인 위치 기준)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative</title>
<style type="text/css">
	.parent {
		width: 200px;
		height: 300px;
		border: 1px solid red;
	}	
	.parent>div {
		width: 100px;
		height: 100px;
	}
	.child_a {
		background-color: violet;
	}
	.child_b {
		background-color: teal;
		position: relative;
		left: 40px;
		top: 50px;		
	}
	.child_c {
		background-color: orange;		
	}
</style>
</head>
<body>
	<div class="parent">
		<div class="child_a">A</div>
		<div class="child_b">B</div>
		<div class="child_c">C</div>
	</div>
</body>
</html>

"본인 위치 기준" left에서 40px, top에서 50px 이동

 

● absolute (브라우저 기준)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>absolute</title>
<style type="text/css">	
	.parent {
		width: 200px;
		height: 300px;
		border: 1px solid red;
	}
	.parent>div {		
		width: 100px;
		height: 100px;
	}
	.child_a {
		background-color: violet;
	}
	.child_b {
		background-color: teal;
        
		/* absolute 선언시 위치값 없어지고, 다른 요소가 해당 위치 채움 */
		position: absolute;	
        
		/* 설정한 위치로 이동 */
		left: 50px;	
		top: 100px;
	}
	.child_c {
		background-color: orange;		
	}
</style>
</head>
<body>
	<div class="parent">
		<div class="child_a">A</div>
		<div class="child_b">B</div>
		<div class="child_c">C</div>
	</div>
</body>
</html>

absolute 적용 후 B는 위로 뜨고 C가 위치 차지 / "브라우저 기준" left 50px, top 100px 이동 

 

● absolute (부모 위치 기준)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>absolute</title>
<style type="text/css">	
	.parent {
		width: 200px;
		height: 300px;
		position: relative;	/* 부모 */
		border: 1px solid red;
	}
	.parent>div {		
		width: 100px;
		height: 100px;
	}
	.child_a {
		background-color: violet;
        
		/* absolute 선언시 위치값 없어지고, 다른 요소가 해당 위치 채움 */
		position: absolute;	
        
		/* 부모 요소 기준, 설정한 위치로 이동 */
		right: 30px;
		top: 80px; 
	}
	.child_b {
		background-color: teal;		
	}
	.child_c {
		background-color: orange;		
	}
</style>
</head>
<body>
	<div class="parent">
		<div class="child_a">A</div>
		<div class="child_b">B</div>
		<div class="child_c">C</div>
	</div>
</body>
</html>

absolute 적용 후 A는 위로 뜨고 B,C가 위치 차지 / "부모 요소 기준" right 30px, top 80px 이동 

 

● fixed (브라우저 기준)

 

 

z-index 속성

 

● 배치 될 요소들의 우선순위 레벨

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
	.parent {
		width: 200px;
		height: 300px;		
		border: 1px solid red;
		position: relative;
	}
	.parent div {
		width: 100px;
		height: 100px;
		position: absolute;	
	}
	.parent .child_a {
		background-color: lightblue;
		z-index: 2;		
	}
	.parent .child_b {
		background-color: violet;	
		left: 50px;
		top: 50px;	
		z-index: 3;
	}
	.parent .child_c {
		background-color: lightgreen;	
		left: 100px;
		top: 100px;	
		z-index: 1;
	}
</style>
</head>
<body>
	<div class="parent">
		<div class="child_a">A</div>
		<div class="child_b">B</div>
		<div class="child_c">C</div>
	</div>
</body>
</html>

A,B,C 순서대로 배치됨 (위치 값 없이 붕 뜨게 됨)

 기본적으로 나중에 배치된 요소가 가장 위에 배치 됨

 

지정 위치로 이동(A-1층, B-2층, C-3층 확인) → z-index 로 순서변경 

 

저작자표시 비영리

'IT국비지원' 카테고리의 다른 글

[CSS] 반응형 웹  (0) 2021.09.06
[CSS] visibility : hidden 과 display : none 의 차이  (0) 2021.09.05
[CSS] 2단 메뉴  (0) 2021.09.03
[CSS] display 속성 (block / inline / inline-block)  (0) 2021.09.01
[CSS] float 속성  (0) 2021.08.31
[CSS] 작성법 및 선택자  (0) 2021.08.30
[HTML] <select> 태그 (드롭다운 목록)  (0) 2021.08.27
'IT국비지원' Related Articles more
Comments