웹 제작 position(2)

position: absolute 와 position: fixed 특징

1. absolute와 fixed는 한가지 특징을 제외하고 전부 동일한 특징을 가지고 있다.
   1) absolute가 처음 적용되었을 때, static상태인 위치에 고정되어있다.
   2) absolute, relative, fixed는 위치속성으로 화면 특정 좌표에 고정될 수 있다.
   → x는 가로 , y는 세로, z는 입체
   → 위치속성 (left, right, top, bottom)
   → absolute, fixed는 위치속성으로 여백을 조정하는 경우가 많다. 위치속성이랑 margin속성을 함께 사용하진 않는다.
   → relative는 특정한 상황이 아니라면 margin속성속성을 사용해서 여백값을 줘야한다.
   → 위치속성을 부모엘리먼트 역할을 하고 있는 태그를 기준으로 작동한다.
   3) absolute와 fixed는 relative로 부모엘리먼트 역할을 지정하기 전까지 body태그가 부모엘리먼트 역할을 한다.
   

   부모 엘리먼트가 있지만 위치를 변화 시켰을때 body태그 기준으로 위치를 잡게 된다.

4) absolute와 fixed는 적용되면 html상 부모엘리먼트를 벗어나게 된다.
벗어났을때 relative로 원하는 부모 엘리먼트를 지정할 수 있다.
단, 상위엘리먼트들 중에서만 relative를 지정할 수 있다.

부모 엘리먼트에 relative를 적용해야만 자식 엘리먼트의 위치를 부모 엘리먼트 기준으로 잡을 수 있다.

부모엘리먼트 역할

1. 위치속성 좌표 제공(공간 제공)

2. 너비높이 상속 제공

relative

1. absolute나 fixed를 가둬놓을 수 있다.
2. static처럼 일반적인 태그로 사용 가능하다.
3. static과 다르게 위치속성을 사용해서 움직일 수 있다.
   

   relative끼리는 겹치지 않는 모습

html의 z축

z-index를 사용하여 순서를 정할 수 있다.

relative
z-index 사용

absolute의 크기

1. absolute는 너비와 높이의 기본 값은 0으로 작용한다. (지정을 해줘야 한다.)

2. 너비 높이를 지정해 주면 이미와 같이 생성이 되지만 여백을 기본적으로 가지고 있다.

3. 위치를 지정해주면 여백을 없앨 수 있다. (위치를 옮긴 것 !)
absolute의 크기

absolute의 크기와 body의 크기

body 크기