[Position]누가 누가 더 높이 올라가나요?

 

HTML은 사실 Ground floor와 1층으로 나눠진다.

간단히 Ground floor는 body tag라고 생각하면 되고 이외 tags들을 1층의 layer가 올라갔다고 생각해보자

 

CSS는 HTML의 style해 준다.

그중 POSITION은 층(floor), 다시 말해 layer를 통해 높이를 형성한다. 높이 형성은 점수 계산방식으로 사용하면 이해가 조금은 쉽다.

 

POSITION

1. top, right, bottom, left

2. position 속성이 없는 경우 1 번의 value 사용(이동) 불가

3. Position이 absolute, fixed, sticky 일 경우 right, bottom 사용 가능

4. 기준의 속성명 위치에서 대상의 속성명 위치까지의 거리.

 

 

 

층(점수) : HTML < position < z-index

층(점수)은 z-index가 가장 높다. 다음 position 마지막이 HTML이다.

 

- 부모, 자식에서는 자식이 층이 높음

- 가장 마지막에 쓰여진 tag가 높은 층

HTML	position (모두 'position' value가 있을 경우)	z-index (모두 'position' and 'z-index' value 가 있을 경우)
맨 마지막에 쓰여진 tag가 가장 높은층(점수)	마지막에 쓰여진 tag가 가장 높은층(점수)	마지막에 쓰여진 tag가 가장 높은층(점수)
		z-index에 높은 점수가 부여된 선택자가 가장 높은층(점수)
		html tag 구조가 같은 형제/남재/자매 끼리의 점수가 자식의 높·낮음 영향 미침 <e.g-1>

<e.g-1>

class="position-parent1"의 z-index가 '2' / position-parent2의 z-index가 '1'인 경우 position-parent1이 position이 position-parent2보다 높다

 

Position : value

	설명
static	1. 기본값 2. 지정된 요소를 일반 요소(p, h etc) 처럼 사용 3. 위치, 레이어 변경 불가(ex. left:150px; => 안 됨) 4. margin : auto 적용 가능
absolute	1. 위치 독립- 다른 요소의 영향 받지 않음 2. 동일한 기준안(형제 요소)에서 모든 요소가 동일한 기준점 사용 3. 위치, 레이어 이동 가능 5. margin:auto 적용 불가	기준점 - 적용된 대상이 높이값 인식을 못함=>겹침 - 부모가 기준점 중심점 - 부모 자식관계 1) 조상, 부모 중 position value가 있는 요소가 기준 2) 자신과 가장 가까운 부모나 조상이 기준이 됨 3) 아무도 없다면 body tag가 기준점이 됨
relative	1. 요소가 작성된 순서대로 배치 2. 모든 요소가 독립된 중심점 사용 3. 위치, 레이어 변경 가능 4. margin:auto 사용 가능(적용 순서 : 선 margin 후 top/right/bottom/left)	기준점 - 각자의 고유 지점이 존재 =>(적용된 대상)높이값 인식 가능
fixed	1. 스크린을 기준으로 지정된 위치에 고정 2. 스크롤 시에도 처음 고정된 위치에서 보여짐 3. 레이어 사용 가능 4. margin:auto 적용 가능