css
포지션 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
포지션도 뭘 쓰던 붕뜨는 특징이 있다.
컨테이닝 블록 개념>
우리가
Content 영역
padding 영역
border 영역
maring 영역
이런걸 다 합쳐서 컨테이닝 블록이라고 부른다.
그러면
컨테이닝 블록은 어디에 영향을 끼치는가?
요소의 크기와 위치는 컨테이닝 블록의 영향을 자주 받는다.
width, height, padding, margin 의 속성값과
절대적 위치(absolute, fixed 등)로 설정된 요소의 오프셋 속성값은 자신의 컨테이닝 블록으로부터 계산된다.
이때 요소의 position 속성에 따라 컨테이닝 블록을 식별하는 과정이 달라진다.
position 속성이 static, relative, sticky 중 하나이면,
컨테이닝 블록은 가장 가까운 조상 블록 컨테이너(inline-block, block, list-item 등의 요소),
또는
가장 가까우면서 서식 맥락을 형성하는 조상 요소(table, flex, grid, 아니면 블록 컨테이너 자기 자신)의
콘텐츠 영역 경계를 따라 형성됩니다.
position 속성이 absolute인 경우,
컨테이닝 블록은 position 속성 값이 static이 아닌(fixed, absolute, relative, sticky)
가장 가까운 조상의 내부 여백 영역입니다.
position이 absolute인 경우에는 static제외한 가장 가까운 조상
즉 html 이 컨테이닝 블록이 되는거임.
모든 요소 (p태그 든, a태그든 div든 모든 요소)의 포지션값은 static이다.
즉, 모든 요소의 컨테이닝블록 값은 다 static이다.
일반적인 상태가 스태틱이다.
position: relative;
top: -5px;
left: 5px;
릴러티브는
상대적인인데
스태틱을 기반으로 자리를 잡는다.
스태틱을 기준으로 얼마나 떨어지냐를 말하는거다
스태틱으로 탑 -5 왼 5 씩 가는거임.
즉, 자신의 static 기준으로 왔다 갔다 할때 쓰면됨.
position: absolute;
앱솔루트는 절대적인인데,
컨테이닝블럭을 기반으로 위치를 잡는 애다.
즉, 애는 딱 원하는 요소 옆에 두고싶을때 한방에 그 옆으로 갈때 쓰는 애임
일단 기본적으로 앱솔루트는
아무값을 안주면
html 을 기준으로 위치를 잡는다.
즉, 부모의 컨텍스트 블럭를 기준으로 위치를 잡는다.
그냥 top left 이런 방향 안주면 그냥 자기바로옆에있는 애를 기준으로 삼는다.
근데
top left 주면 컨테이닝 블럭 기준이로 위치를 잡는다.
보통 position: static; 이 자동으로 된 태그들이 많은데,
앱솔루트를 적용시키려면
position: relative; 을 줘야 적용이되므로
부모에게 릴러티브를 주고
적용하려는 태그에게는 앱솔루트를 줘서
방향을 주면 적용이된다.
fixed
뷰포트 사이즈 기준으로 정해짐.
계속 고정된 상태로~
position
프로퍼티
z-index
수직방향 할때.
즉,
포지션도 플롯처럼 붕뜨는건 매한가지인데
그 붕뜨는 수직방향에 길이를 정할수있다.
즉, 우선순위를 정해서
요소끼리 겹칠때
뭘 먼저 깔고 뭘 앞에 둘지 하는게
z-index임.
z-index:1 - 젤 밑바닥
z-index:2 - 그다음 위로 올라오는애
