코딩공부)HTML_웹표준 14일차 레이어/relative/기준의 정의

position:absolute/fixed

static/relative(x)

static2.html

margin:auto - (블록요소 div,p,ul,li...)

= text-align:center - (인라인 요소text,img)

absolute - flaot랑 비슷

다른요소의 영향 주거나 받지 않음

flaot처럼 위로 떠버림

같은 기준점을 사용 할 수 있다.

**레이어

1.요소들간의 층(앞/뒤)

2.z-index 속성 사용

3.1부터 시작하는 정수 사용(순차적인 필요x)

4.형제간에는 순서와 무관하며 높은 숫자가 앞

5.속성을 지정하지 않는 경우 나중에 작성된 요소가 앞

6.임의로 생성된 값은 실제 값보다 무조건 뒤(z-index를 쓰면 무조건 앞)

7.position 속성과 함께 사용

먼저 작성된 것이 아래쪽에 위치

실습

#header 에 z-index:1을 줬더니 맨앞으로 튀어나옴

#footer를 앞으로 나오게 하고싶다 - z-index:2(높은 숫자가 위다. 높은 숫다 쓰면됨)

*relative = static+absolute

1.요소가 작성된 순서대로 배치

2.위치,레이어 변경 가능

3.모든 요소가 독립된 중심점 사용

4.margin:auto 사용 가능(absolute는 안됨)

5.다른 요소의 영향 있음

움직일 수 있다는 점이 absolute랑 같다.(차이점 absolute는 중심점이 같다.)

relative는 각각의 중심점이 있다. static처럼 차례대로 배치가능.

01_22.html

position에 따라서 위치가 전혀 다르다

(방법설명)

header위치 바꿔도 content footer는 움직이지 않음

relative는 position이 있는 부모의 영향을 받는다.

position

1.방법설명

2.기준점

**기준의 정의**

1.움직이는 대상의 position이 relatve인 경우

- 부모요소가 기준

2.움직이는 대상의 position이 absolute인 경우

- position 속성은 position 속성을 가지는 상위 요소가 기준

- 상위 요소 중 positon 속성을 가지는 요소가 없는 경우

document가 기준

*fixed

1.스크린을 기준으로 지정된 위치에 고정

2.스크롤 시에도 처음 고정된 위치에서 보여지는 속성값

3.margin:auto 사용 불가

4.레이어 사용 가능

static/relative

sticky