티스토리 뷰
《 position 》
❑ 태그 종류: relative / absolute / fixed / sticky
⇨ 기본값: static
⇨ 각각의 기준으로 배치: left, right, top, bottom
⇨ 기준을 정할 때 사용하는 태그: relative
⇨ 억지로 움직여야 할 때 사용하는 태그: absolute
⇨ 기준 위치에서 안쪽으로 이동하면 양수
⇨ 기준 위치에서 바깥쪽으로 이동하면 음수
# relative
❑ 기준이 자기 자신 (= 원래 위치)
⇨ 기준을 정할 때 설정!
❑ 가상으로 이동 (= 실체 이동X)
❑ left / right / top / bottom에서 민다고 생각하기
.relative{
position: relative;
top: 50px;
/* top: -100px; */
/* margin-top:100px; */
/* margin: 실제로 공간을 만들거나 없애면서 이동하는 방법 */
}
.relative:hover{
top: -20px;
}➡ margin 태그를 주게 되면 뒤에 따라오는 요소까지 같이 움직임
➡ top: 50px (= 기준 위치의 위쪽에서 50px만큼 밀어 이동 시키기)
➡ top: -100px (= 기준 위치의 위쪽 바깥으로 -100px만큼 밀어 이동 시키기)
➡ hover 태그를 준 클래스가 마우스를 올리면 기준 위치의 위쪽 바깥으로 -20px 이동되어 나타남
# absolute
❑ 가까운 부모중에 position 속성의 값이 기본값이 아닌 요소
⇨ 억지로 움직여야 할 때 사용!
⇨ 기본값이 없으면 body가 기준
❑ 안의 내용 크기로 줄어듬
❑ 다른 요소들이 absolute를 인지하지 못함
⇨ 붕 떠 있는 상태라 말함
# fixed
❑ 전체 화면을 기준으로 고정
⇨ 안의 내용 크기로 줄어듬
❑ 다른 요소들이 인지하지 못함
➡ 오른쪽 하단의 TOP이 스크롤을 내려도 화면에 고정되어 있음
# sticky
❑ 스크롤을 내리면 지정한 위치에 껌처럼 붙어 고정
⇨ fixed와 다르게 스크롤과 함께 움직이다가 지정한 위치에 도달하면 고정
.sticky {
padding: 20px;
width: 170px;
position: sticky;
top:0;
}➡ top: 0; 위치에 도달하면 고정
《 z-index 》
❑ 비교 대상은 반드시 포지션이 있어야 함
⇨ 비교 대상과 포지션 값이 달라도 우열을 가릴 수 있음
⇨ 하나라도 포지션이 없으면 우열을 가릴 수 없음
❑ 자식의 값보다 부모의 값이 제일 우선
⇨ 비교대상 A의 자식이 높은 값을 가져도 비교대상 B의 부모 값이 A의 부모 값보다 높으면 이길 수 없음
<실행 결과>
<!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>Z-index</title>
<style>
.parent {
width: 200px;
height: 200px;
background: #ccc;
position: relative;
z-index: 2;
}
.siblings {
width: 200px;
height: 100px;
background: green;
position: relative;
top: -50px;
left: 50px;
z-index: 1;
}
div[class^="child"] {
width: 100px;
height: 100px;
border: 1px solid;
text-transform: uppercase;
font-weight: bold;
}
.child1 {
background: blue;
color:#fff;
position: relative;
z-index: 1;
}
.child2 {
background: red;
position: relative;
top: -30px;
left: 30px;
z-index: 10;
}
.child3 {
background: #fff;
z-index: 20;
position: relative;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">child 1</div>
<div class="child2">child 2</div>
</div>
<div class="siblings">
<div class="child3">child 3</div>
</div>
</body>
</html>
➡ child3 클래스가 child2 클래스보다 높은 값을 가져도
부모(siblings)의 값이 비교 대상의 부모(parent) 값보다 작기 때문에 이길 수가 없음
calc(100% + 10px)
: 괄호안을 수치로 써라
공백 꼭 두기
단위 꼭 쓰기
'CSS' 카테고리의 다른 글
| transform / Loading / aside animation (0) | 2023.06.01 |
|---|---|
| shadow / gradient / transition / animation (0) | 2023.06.01 |
| float (0) | 2023.06.01 |
| display / overflow / background (0) | 2023.06.01 |
| 우선 순위 / font & text / vertical-align / list Style (0) | 2023.06.01 |