position - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • position
    learn
    Practice
    learn
    13 위치 정렬
    position

    position은 이름 그대로 요소를 배치하는 방법을 정하는 프로퍼티로, 네 가지 값을 주로 사용합니다. 지금부터 position과 관련된 프로퍼티 값과 프로퍼티에 대해 차례로 살펴보겠습니다.


    position:static


    보통 요소의 position 값은 static이 기본입니다. static에서는 좌표 프로퍼티를 사용할 수 없습니다. toprightbottom, left 말이죠. 


    position:relative


    relative는 말 그대로 상대 위치입니다. 기본 위치를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동합니다. 좌표 프로퍼티를 사용하여 이동할 수 있다는 점만 제외하면 나머지는 static과 동일합니다. relative와 static의 차이를 보기 위해 아래와 같은 예시를 실행한다 해도, 아직 차이가 없음을 확인할 수 있습니다.

    이제 좌표 프로퍼티를 사용해 봅시다. 아래 코드와 같이 .static.relative를 수정하고 실행하면, static에선 좌표 프로퍼티가 적용되지 않지만 relative에는 적용되는 것을 확인할 수 있습니다.

    여기서 left와 top은 원래의 위치를 기준으로 16px씩 배치합니다. 원래의 위치란 해당 요소가 position:static이었을 경우의 위치를 뜻합니다. div 2position:static일 때 위치가 아래와 같다고 가정해 봅시다.

    div 2position: relative의 top, left에 각각 16px를 할당하면 아래와 같이 position: static이 가질 위치보다 위에서 16px, 왼쪽에서 16px만큼 멀어지게 됩니다.

    다른 예제로 좀 더 살펴 봅시다. 위 예제에서 HTML 부분만 아래와 같이 수정합니다. 코드를 실행하여 차이점을 직접 느껴보세요.


    position: absolute


    absolute절대 위치입니다. 이 부분이 조금 복잡합니다. 부모 요소나 조상 요소 중 relative, absolute 혹은 fixed가 선언된 곳을 기준으로 좌표 프로퍼티가 작동합니다. 좀 복잡하죠? 바로 예제로 이해해 봅시다.

    .parentposition: relative가 선언되었기 때문에 .parent를 기준으로 bottomright가 적용됩니다.

    만약 아래와 같이 .parent를 감싸는 <div> 태그를 하나 더 만들고 .ancestorposition:relative를 적용하면 차이가 발생합니다.

    아까와는 다르게 이번에는 .ancestor를 기준으로 .absolute가 배치되었죠.


    추가로 만약 부모나 조상 프로퍼티에 relative, absolute, fixed가 없다면 최상단 태그인 <body>를 기준으로 위치가 지정됩니다.


    position: fixed


    fixed는 간단합니다. 보이는 화면을 기준으로 좌표 프로퍼티를 이용하여 위치를 고정시킵니다. 스크롤할 때 따라다니는 메뉴가 바로 fixed를 활용한 겁니다. 아래 예제를 실행하여 직접 스크롤해봅시다.


    z-index 


     마지막으로 position과 함께 쓰는 프로퍼티는 top, right, bottom, left 이외에 z-index도 있습니다. z-index를 통해 수직으로 어떻게 쌓이는지 정하는 프로퍼티로, 값은 숫자로 표현됩니다. 숫자가 클수록 전면에 출력되죠. static을 제외한 요소에서만 적용됩니다.

    아래의 예시를 통해 직접 사용해 봅시다.

    Practice

    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)