position

웹 브라우저는 나열된 HTML 요소들을 인라인 요소들은 왼쪽에서 옆으로, 블록 요소들은 위에서 아래로 표시하는 흐름[normal flow]을 갖고 있다. 요소에 position 속성을 사용하면 이 흐름을 조정할 수 있다.

position 속성에 사용할 수 있는 값은 4개가 있으며, static을 제외한 나머지 값을 사용하면 top, bottom, left, right를 사용하여 각 값의 기준에 따라 위치를 지정할 수 있다.

  • static: 요소를 문서의 흐름에 맞추어 배치한다. 속성을 사용하지 않는다면 묵시적으로 이 값을 기본값으로 사용한다.
  • relative: position: static일 때의 위치를 기준으로 하여 위치를 지정한다.
  • absolute: position: relative가 지정된 상위 요소를 기준으로 하여 위치를 지정한다.
  • fixed: 웹 브라우저를 기준으로 위치를 지정하여 해당 위치에 요소를 고정시킨다. 이 값이 적용된 요소는 브라우저가 표시하는 페이지의 흐름과 별개로 표시되므로, 페이지를 스크롤하여도 요소는 항상 해당 위치에 있게 된다.

요소의 앞과 뒤

position 속성이 지정된 요소들의 위치를 조정하다 보면 요소들이 서로 겹치는 일도 발생하며, 특히 어떤 요소가 의도치 않게 다른 요소에 가려지는 일이 생기기도 한다. 이때 요소에 z-index 속성을 적용하여 요소의 앞과 뒤를 조정할 수 있다.

z-index 속성은 position의 값이 relative, absolute, fixed 중 하나로 지정된 요소에만 효과가 있으며, z-index의 값은 정수로 숫자가 더 클수록 요소가 앞에 나타난다. z-index를 지정하지 않으면 기본적으로 하위 요소가 상위 요소보다 더 앞에 나타나며, 나중에 나열된 요소가 먼저 나열된 요소보다 더 앞에 나타난다.


(z-index 적용, MDN)

results matching ""

    No results matching ""