Position이란?
Position에서 반드시 알아야 할 2가지
아래의 두 가지 부분을 생각해야 한다!
1. Type
내가 어떤 종류의 position을 사용하고 있는지
2. 기준점
그래서 내가 사용하는 position을 무엇을 기준으로 요소를 위치시키는지
🚀 1. static
모든 요소의 기본 position 값임.
p, a, strong, div, dl, list 뭐든 모든 요소의 기본 position은 static이다
🚀 2. relative
기준점 : 자신이 원래 있던 자리.
relative를 주면 float처럼 부모를 떠나 붕 뜨는 것은 마찬가지임.
하지만 float 때와는 다르게 레이아웃을 붕괴시키거나, 다른 주변 요소에 영향을 끼치거나 하지 않는다.부모/형제가 자식의 원래 위치를 기억하고 있다!
🚀 3. absolute
😎 float와의 비교
float의 문제점 4가지 중 3가지를 그대로 갖고 간다.
복습을 위해 전에 작성한 이 글을 참조하도록 하자!
(display: block;이 되긴 하는데, 길막을 하지 못하는 삐꾸같은 block이 된다....)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Position</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="grandparent">
<div class="parent">
<div class="child red">Child</div>
<div class="child yellow">Child</div>
<div class="child blue">Child</div>
</div>
</div>
</body>
</html>style.css
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: 'Poppins', sans-serif;
color: #212529;
}
.grandparent {
width: 800px;
margin: 0 auto;
background-color: #1f2d3d;
}
.parent {
width: 400px;
margin: 0 auto;
background-color: #eff2f7;
}
.child {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
color: #fff;
font-weight: 600;
}
.red {
background-color: #ff4949;
}
.yellow {
background-color: #ffc92c;
}
.blue {
background-color: #0066ff;
}
.other {
color: #fff;
background-color: #000;
}
여기서 빨강이에게 position: absolute; 를 주게 되면,
빨강이는 노랑이 위로 뜨게 되고,
부모의 높이는 400px이 된다.
display: block이 되기는 하는데, 길막을 못하는 이라는 점에서 float과 같다.하지만
display: absolute와 float의 차이점이 있는데, 바로 아래와 같다.
child 클래스에
position: absolute;속성을 넣어주면,
이처럼 child를 피해가지 않고 그냥 지나가는 것을 알 수 있다.
float: left; 속성을 주었을 때와 비교해보면 확연히 다른 것을 알 수 있다.
😎 absolute는 무엇을 기준으로 위치를 정하는가?
float의 경우에는 철저히 부모에게 종속되었음. 하지만 absolute는 자신을 감싸고 있는 조상중에서
position: static;이 아닌 경우, 그 요소를 기준으로 자신의 위치를 정할 수 있다.
부모지만 position: static;인 경우, 이것을 기준으로 자기 자신을 위치시킬 수 없다.
하지만 이렇게 relative, absolute, fixed, sticky 중 하나인 경우, 조상중 하나를 골라 자기의 위치를 정할 수 있다.
이 경우 가장 만만하게 사용할 수 있는 것이 position: relative; 이다. 조상이 absolute인 경우, 또 걔의 기준점을 잡기 위한 그 조상을 찾아서.... 무한의 굴레로...
😎 예시
grandparent 클래스에 position: relative; 속성을 주고,
빨강이에게 아래와 같이
.red {
position: absolute;
left: 0px;
background-color: #ff4949;
}이렇게 속성을 주면,
grandparent 클래스의 왼쪽 모서리를 기준으로 위치를 잡게 된다.
.red {
position: absolute;
bottom: 20px;
background-color: #ff4949;
}이렇게 bottom 속성을 주면, 부모가 아닌 grandparent의 아래 모서리를 기준으로 20px 위에 위치하게 된다.
.red {
position: absolute;
bottom: 20px;
right: 20px;
background-color: #ff4949;
}right 속성을 넣어 주어도 동일한 원리도 동작하는 것을 확인할 수 있다.
🚀 4. fixed
position: absolute를 사용했을 때와 동일한 현상이 일어난다. 하지만 absolute와 fixed의 차이점은, viewport를 기준으로 자신만의 위치를 잡는다는 것이다.
😎 예시로 살펴보자!
position: fixed를 빨강이에게 줘보자.
absolute의 경우와 마찬가지로, float처럼 붕 뜨는 것을 확인할 수 있다.
여기서,
bottom: 0;을 주면,
이렇게 화면을 기준으로 맨 아래에 위치하게 된다.
이번에는 body에 height: 3000px;을 주면,
쭉쭉 화면이 내려가는 것을 확인할 수 있다.
🚀 5. sticky
지원하는 브라우저가 많지 않으므로 skip !
🤔 기준점을 잡고 위치시킬 때 유의할 점
세로에서는 top나 bottom 중 하나만,
가로에서는 left와 right 중 하나만 고르는 것이 좋다.
이렇게 파란 네모를 하늘색 방향으로 옮기고 싶다면,
top과 left 속성을 주는 것이 합리적일 것이다.
하지만 이렇게 분홍색으로 위치를 옮기고 싶다면,
bottom과 right 속성을 주는 것이 더 합리적일 것이다.
z-index
position된 요소들의 수직 방향으로서의 레벨(위치)를 알려주는 놈이다.
position 속성을 주면, static을 제외한 나머지 position들은(relative, absolute, fixed) 요소를 붕 띄운다는 점에서는 매한가지이다.
그럼 이렇게 z-축을 기준으로 레벨이 생긴다.
빨강이가 노랑이를 살짝 덮고 싶다는 생각이 들 경우,
노랑이 에게 z-index를 1을 주고, 빨강이 에게 z-index를 2를 주면 된다.
