이번 포스팅에서는 다소 복잡하고 헷갈릴 수 있는 CSS속성인 position에 대해서 알아보도록 하겠습니다!
저도 이번 파트는 헷갈리는 부분도 많고 어떻게 적용되는건지 이해하는데 시간이 좀 걸렸기에 코드를 보면서 어떻게 적용되는 것인지 잘 생각하면서 따라오면 좋을 것 같습니다!
position속성은 단어에서도 알 수 있듯이 위치를 설정하는 속성으로, HTML에서 어떤 요소의 원래 위치를 바꿀 때 사용하는 속성입니다.
position속성에서 위치 지정 방식에는 static, relative, absolute, fixed 등이 있는데,
⚠️여기에서 주의해야할 점은 position속성이 먼저 선언 되어야 static, relative, absolute, fixed 이들 코드를 CSS파일에 입력했을 때 유의미하다는 것 입니다!!!!⚠️
position 속성
-static: 정적 위치 지정방식
-relative: 상대 위치 지정 방식
-absolute: 절대 위치 지정 방식
-fixed: 고정 위치 지정 방식
-top: 위치가 설정된 조상 요소의 위로부터의 여백을 설정함
-right:위치가 설정된 조상 요소의 오른쪽부터의 여백을 설정함
-bottom: 위치가 설정된 조상 요소의 아래로부터의 여백을 설정함
-left: 위치가 설정된 조상요소의 왼쪽으로부터이 여백을 설정함
-z-index: 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정함(음수~0~양수 모두 가능!숫자가 커질수록 뒤쪽에 배치)
그럼 이 속성들이 실제로 어떻게 사용되는지 한번 코드로 알아보겠습니다!
body {
margin: 0;
padding: 1000px;
}
div {
width: 100px;
height: 100px;
font-weight: 700;
text-align: center;
line-height: 100px;
}
/* static:기본값
-기본값이기 때문에 적용하지 않아도 이미 적용됨
-인라인요소라면 왼쪽에서 오른쪽으로 쌓잉
-블럭요소라면 위에서 아래로 쌓임
*/
.position-static {
background-color: pink;
position: static;
}
/* relative:상대위치
일반적인 흐름에 따라 배치, top, bottom,left,right 중 하나 이상 작성 해야함
원래 있어야 하는 위치기준으로부터 top, bottom, left, right만큼 씩 이동 */
.position-relative {
background-color: aquamarine;
position: relative;
left: 200px;
/* 원래 위치부터 왼쪽으로 이동(보기에 오른쪽으로 이동한 것 처럼 보임) */
}
/* absolute:절대위치
-누구를 기준? position속성을 갖는 제일 가까운 조상기준
-포지션 속성을 갖는 조상이 없다면 body태그를 기준으로 삼음
-> 특정 요소를 기준으로 삼아서 top,bottom,left,right만큼 떨어지겠다.
*/
.position-absolute {
background-color: gold;
position: absolute;
top: 50px;
left: 50px;
/* body tag로 부터 위로 50px, 왼쪽으로 50px만큼 떨어지겠다 */
}
/* fixed: 고정 위치
viewport(브라우저의 화면 전체)를 기준으로 특정 위치 배치
브라우저에서 항상 고정되엉 있는 거에 fixed를 사용
스크롤 해도 사라지지 움직이지 않는다!!!*/
.position-fixed {
background-color: coral;
position: fixed;
top: 0;
right: 0;
/* 위쪽 여백 없애고 오른쪽 여백 없어짐 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS - z-index</title>
<link rel="stylesheet" href="./index7.css">
</head>
<body>
<h1>CSS z-index에 대해 배워보자</h1>
<div class="div1 position-absolute">
absolute
</div>
<div class="div2 position-absolute">
absolute
</div>
<div class="div3 position-absolute">
absolute
</div>
<div class="div4 position-absolute">
absolute
</div>
<div class="div5 position-absolute">
absolute
</div>
</body>
</html>
div {
width: 100px;
height: 100px;
font-weight: 700;
text-align: center;
line-height: 100px;
position:absolute;
/* body tag를 기준으로 위치를 잡게 된다 */
}
/*
z-index:겹치는 요소에 대한 순서를 결정
-숫자 값: 양수, 0 ,음수
-숫자 값이 클수록 더 위에 쌓인다=가장 앞에 놓인다
*/
.div1 {
top: 100px;
left: 100px;
background-color: red;
z-index:8;
}
.div2 {
top: 140px;
left: 140px;
background-color: orange;
z-index:7;
}
.div3 {
top: 180px;
left: 180px;
background-color: yellow;
z-index:10;
}
.div4 {
top: 220px;
left: 220px;
background-color: green;
z-index:4;
}
.div5 {
top: 260px;
left: 260px;
background-color: blue;
z-index:12;
}
