WEB Front-End/CSS

CSS 01 - position (static, relative, absolute, fixed) 속성, z-index

hyg4196 2021. 9. 13. 13:25
반응형

static (기본값) :위치를 지정하지 않을 때 사용한다.

 

relative : 위치를 계산할때 static의 원래 위치부터 계산한다.

 

absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.

 

fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 

         브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

 

 

z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.

 

z-index 추가 설명

- https://developer.mozilla.org/ko/docs/Web/CSS/z-index

반응형