[130626]웹표준 7강

Position

1. 레이아웃요소

2. 움직이는 방법

3. 위치 지정 속성과 같이 사용

 

*위치 지정 속성 (position은 위치 지정 속성과 같이 사용)

1. left : 기준의 왼쪽부터 대상의 왼쪽까지의 거리

2. right/top/bottom

3. 반대 방향의 속성과 사용 금지

 

**position 속성**

*static

1. position 속성의 기본값 (사용수가 적음)

2. 선택한 요소를 일반 요소로 지정

3. 태그가 작성된 순서대로 배치

4. 이동, 레이어 변경 불가

 

*absolute(절대값) - 레이어 변경 가능

1. 같은 중심점 사용

2. 다른 요소에 영향 없음

3. 지정된 위치로 이동

 

*fixed(상대적 고정값, relative+absolute)

1. 다른 요소에 영향 없이 지정된 위치로 이동

2. 스크롤 시에도 지정된 위치에 고정되어 보여짐

 

 

**Z-index**

1. 지정된 요소들간의 위아래(층) 구분

2. 층 지정이 가능한 요소에 속성을 사용하지 않으면 임의의 값(태그가 작성된 순서대로)적용

3. 실제로 적용된 앖은 임의의 값보다 반드시 위

4. 값의 적용은 순서와 무관하며 높은 숫자를 가진 요소가 더 위에 배치

5. 하위 요소의 속성은 부모 요소의 레벨 초과 불가

(형제 레벨 요소들끼리만 비교가능)

 

*relative (상대값, static+absolute 합친형태)

1. 태그가 작성된 순서대로 배치

2. 다른점 - 이동 및 레이어 변경가능 (absolute랑 같은 기능)

3. 처음 배치된 곳을 기준으로 이동

4. 다른 요소에 영향있음

5. height 속성 유무에 따라 다르게 적용

- height 속성이 있는 경우 :  안에 있는 컨텐츠의 양에 상관없이 지정된 높이 만큼만 인식

- height 속성이 없는 경우 : 안에 있는 컨텐츠의 양만큼 변경

 

 

**기준의 정의**

1. position 속성을 가지는 요소는 position속성을 가지는 상위 요소를 기준으로 이동

2.  상위 요소가 position 속성을 가지지 않았다면 position 속성을 가지는 차상위 요소를 기준으로 이동

3. position 속성을 가지는 상위 요소가 없다면 body(document)를 기준으로 이동

 

*z-index /레이어위치/기준의 이해