✔️ 내가 원하는 것!
img라는 이미지를 초록색 박스의 위치로 이동 시키는 것이다.

그 전에 사용했던 방법은 negative margin을 사용하였고 이 방법은 실제로 이미지가 이동하는 게 아니라 이동한 것 처럼 보이게 했었다.

그렇다면 실제로 이미지를 이동시키고 싶으면 어떻게 해야할까?

1. transform

.children{
	transform: translateX(-50%);
}

2. position

.children {
	position: static // 표준 상태
}

Position

위치를 이동 시키는 속성으로 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용된다.

❗️ 이미지가 원래 차지하고 있던 공간을 유지하는 상태에서 시각적인 것만 이동이 된다.

순수하게 위치 이동을 담당하는 속성이다.

💡 Position 속성

• static
• relative
• absolute
• sticky

1. static

position의 기본값으로 원래 있어야하는 위치에 배치된다.
➡️ 작성된 순서 그대로 브라우저 화면에 표시
❗️ top, left, bottom, right 속성 무시

---

2. relative

요소를 원래 위치를 기준으로 상대적으로 배치한다.
➡️ 자기 자신을 기준으로!
⭐️ 원래 차지하고 있던 공간 유지 ⭐️ --> 시각적인 것만 움직임 (=transform)

위치 지정은 top, bottom, left, right 속성을 이용해 얼마나 떨어지게 할지를 지정한다.
top, left 사용이 일반적

.childern {
	width: 100px; height: 100px;
    
	position: relative;
    left: -50px;
    top: 0;
}

➡️ 원래 위치를 기준으로 왼쪽으로 -50px만큼 이동한 것이다.

---

3. absolute

상대적인 절대 위치로 상위 요소를 기준으로 absolute 적용한다.

❌ 속성 값의 이름이 abolute라고 relative 속성과 반대로 절대적으로 요소를 배치한다고 생각하면 안된다 !!

❌ 인라인 요소 아님 --> width, height 지정 가능

⭕️ abolute 일 때는 배치 기준을 자신이 아닌 상위 요소에서 찾는다.
DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫번째 상위 요소가 해당 요소의 배치 기준으로 설정된다.

❗️ 이 때 position 속성이 static이 아닌 요소가 없다면, viewport가 배치 기준이 된다.

⭐️ 공간을 버리고 위로 뜸 ⭐️

어렵게 느껴질 수 있지만 대부분 부모 요소 (가장 가까운 상위 요소)를 기준으로 top, bottom, left, right 속성을 적용해야 하기 때문에
➡️ 어떤 요소의 position 속성을 absolute로 설정하면 부모 요소의 position 속성을 relative로 지정해주는 것이 관례이다.

++ ) 공간을 차지하지 않음
원래 차지하던 공간을 버리고 viewport 기준으로 변한다.
❗️ veiwport라는 크기에서 좌표 개념을 빌려서 공간에 배치되는 것 뿐이고 아예 고정되는 게 아니다!!

.childern {
	position: absolute;
 }

➡️ 이미지가 공간을 차지하지 않으므로 텍스트가 이미지를 신경쓰지 않고 배치된다.

.childern {
	position: absolute;
    left: 0;
    top: 0;
}

➡️ 계속 상위 요소를 찾아봐도 static이 아닌 position 값이 없으므로 viewport를 기준으로 위치를 이동한 것이다.

.childern {
	position: absolute;
    right: 0;
    bottom: 0;
}

➡️ 마찬가지로 계속 상위 요소를 찾아봐도 static이 아닌 position 값이 없으므로 viewport를 기준으로 위치를 이동한 것이다.
❗️ Body가 기준이 아니라 viewport가 기준!

✔️ 상위 요소에 position: relative 라는 속성이 있으므로 상위 요소가 기준이 되어 자식 요소를 배치

계속 비슷한 말을 하고 있지만 이 속성은 상위요소(부모 요소)와 하위 요소(자식 요소)가 있어야 한다.
➡️ 상위요소를 기준으로 동작됨

ex)
father 기준으로 자식이 absolute
father에 position 없으면 더 위로 올라감 (끝까지 없으면 viewport)

💡 다시 한번 정리

부모 요소에 여러개의 position 값이 있다면 (static 말고)
➡️ 상위 요소 중 더 가까운 상위 요소가 기준

상위의 개념으로 찾으러 올라가다가 static이 아닌 것을 찾으면 그걸 기준으로 삼는다! 없어서 올라가고 올라가다 보면 최초의 요소는 viewport인 것이다.
(최초의 위치 = 전체창 = viewport)

static이 아닌 속성을 찾으면 멈춘다.
➡️ 거기가 기준 (컨테이닝 블록으로 설정)
➡️ 직계 부모를 컨테이닝 블록으로 삼지 않고 더 상위 요소를 컨테이닝 블록으로 삼을 수 있음
➡️ 더 자유도 높게 위치 설정 가능

❗️ viewport 기준으로 적용

💡 사용하는 이유
꼭 자신의 직계 부모가 아니더라도 더 상위 요소로 컨테이닝 블록을 설정할 수 있다.
➡️ 가장 가까운 상위 요소에서 static이 아닌 position 값을 만나면 그게 이 요소의 컨테이닝 블록(배치 기준)이 됨

💡 컨테이닝 블록
부모가 제공해주는 컨텐츠 영역
새로운 컨테이닝 블록 설정은 해당 요소의 상위 요소에서만 가능

ex)

.father {

}
.children {
	width: 100%;
}

➡️ father 요소의 너비를 기준으로 너비가 전체를 차지 한다.

.grandfather {
	position: relative;
}
.father {
}
.children {
	width: 100%;
    position: absolute;
}

➡️ grandfather 요소의 너비를 기준으로 너비가 전체를 차지 한다.
❗️ 더 높은 상위 요소를 기준으로 설정 가능

---

++ ) top, bottom, left, right 속성들은 absolute, relative에 따라 다르게 표현된다.

left: 0;
top: 0; 

---

컨테이닝 블록을 가용 공간으로

✔️ before (가용 공간: 0)

.children {
	position: absolute;
}

최초의 absolute는 인라인 블록은 아니지만 컨텐츠 크기 만큼으로 최소화 되어있다.

✔️ after (가용 공간 최대치)

.children {
	position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

컨테이닝 블록은 부모로부터 넘어오는 값

➡️ 가용 공간을 이용해 (가용 공간을 최대치로) 컨테이닝 블록을 다 채움
❗️ 주어진 컨테이닝 블록은 가용 공간
➡️ 자식이 컨테이닝 블록을 어떻게 쓸 지는 자유!

💡 컨테이닝 블럭을 가용 공간으로 활용
left: 0 & right - 너비의 가용 공간 최대치 (늘어남) (땡겨짐)
top: 0 & bottom - 높이의 가용 공간 최대치 (늘어남) (땡겨짐)

✔️ width & height 값 지정

.children {
	position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; // 가용 공간 생성 
    
    width: 100px;
    height: 100px;
}

width, height을 지정 안하면 width, height가 자동적으로 가용 공간을 꽉 채우는 것이고, 값을 지정한다면 값만큼의 크기가 된다.

❗️ 위 아래로도 가용 공간이 확보 되는 것! (지금까지는 좌우로만 가용 공간이 확보 되었음 --> 유지보수를 위해 height 값을 지정 안했기 때문에)

✔️ margin: auto

.children {
	position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; // 가용공간 생성
    
    width: 100px;
    height: 100px;
    
    margin: auto
}

위 아래 공간이 모두 가용 공간이므로 margin을 이용하여 가운데 정렬을 할 수 있다.

inset

left: 0;
top: 0;
right: 0;
bottom: 0; 

➡️ inset: 0 0 0 0; (top, right, bottom, left)

position 사용 예시

li 요소들 사이에 시각적으로 선을 넣고 싶다면?

1. position: absolute - 실제 값이 아니므로 가상 요소를 이용하여 배치한다.

2. timeline { position : relative } - 컨테이닝 블록으로 설정한다. (배치의 기준점 설정)

3. inset: 0 - 가용 공간을 컨테이닝 블록을 꽉 채우도록 늘린다.

4. width: 10px - 위 아래는 가용 공간을 전부 채우게 두고 너비는 10px로 고정하여 크기를 조정한다.

5. margin: 0 auto - 가용 공간의 가운데에 배치한다.

이미지의 크기

.box-icon {
	position: abolute;
    top: 0;
    bottom: 0; // 위 아래로 가용 공간 만듦
    
    margin: auto 0;	// 위아래 중 가운데로 정렬
}
.box-icon.left {
	left: 0;	
}
.box-icon {  
	right: 0;	
}

👀 헷갈렸던 점
top: 0 & bottom: 0 을 적용해도 사진의 높이가 꽉 차지 않음

❌ top: 0 & bottom: 0 을 진행한다면 무조건 안의 요소를 늘린다고 생각할게 아니라
⭕️ 우선 공간을 늘려 가용 공간을 만든다고 생각해야 한다.
❗️ 이미지 요소는 높이와 너비가 이미 지정 되어 있기 때문에 가용공간만 생기는 것이지 꽉 채우도록 늘어나지는 않는다.
➡️ 높이, 너비가 지정 안된 상태에서만 가용공간 만큼 따라 커지는 것 (지정 되어있으면 늘어나지 않고 지정된 대로!!)

---

3. sticky

relative 속성처럼 동작하다가, 스크롤시 지정 지점에서 요소를 고정

❗️ sticky속성을 갖는 요소들은 자신의 부모 요소안에서만 적용된다.
❗️ 부모태그에 무조건 height 값이 들어가 있어야한다.
➡️ 부모  height 값만큼 sticky가 고정된다!!!!!!
❗️ 부모요소중에 overflow: hidden, auto, scroll 속성이 적용되어 있으면 안된다.

.constainer {
	position: sticky;
    left: 0;
    top: 0; // left:0 & top:0 기준으로 고정