CSS Position

Position이란?

• 문서 상에 요소를 배치하는 방법을 의미한다.
• top, left, right, bottom 속성을 통해 위치를 지정한다.
  
  

Position 속성

• static : 기준 없음 (배치 불가능 / 기본값)
• relative : 요소 자기 자신을 기준으로 배치
• absolute : 부모(조상) 요소를 기준으로 배치
• fixed : 뷰포트 기준으로 배치
• stickey : 스크롤 영역 기준으로 배치

1. Relative

요소를 자기 자신 원래 위치를 기준으로 배치한다.
원래 위치를 기준으로 위쪽, 아래쪽, 왼쪽, 오른쪽으로 부터 얼마만큼 떨어질 지를 결정한다.
위치를 이동하면서 다른 요소에 영향을 주지 않는다.

• html

<div class="grand-parent">
    <div class="parent">
        <div class="child">1</div>
        <div class="child relative">2</div>
        <div class="child">3</div>
    </div>
</div>

• css

.grand-parent {
    /* 박스 스타일링 */
    height: 500px;
    border: 5px dotted lightsalmon;
    /* padding : border와 content사이에 주는 간격 */
    padding: 50px;
}

.parent {
    /* 박스 스타일링 */
    height: 500px;
    border: 5px dotted lightslategray;
    padding: 10px;
}

.child {
    /* 박스 스타일링 */
    width: 150px;
    height: 100px;
    border: 3px dotted crimson;
    border-radius: 12px;
    background-color: lightyellow;

    /* 텍스트 정렬 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

/*  position: relative
-> element가 원래 본인 위치 기준으로 자리를 잡음 */
.relative {
    position: relative;
    left: 100px;
    top: 5px;
}

• 브라우저 출력 창
  

2. Absolute

가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다.
조상 중 position 값을 가진 요소가 없다면 초기 컨테이닝 블록(body)를 기준으로 삼는다.
문서 상 원래 위치를 잃어버린다. (아래에 있는 div가 해당 자리를 차지한다.)

• html

<div class="grand-parent">
    <div class="parent">
        <div class="child">1</div>
        <div class="child absolute">2</div>
        <div class="child">3</div>
    </div>
</div>

2-1. 부모 relative & 자식 absolute

Parent에게 position 값이 있는 경우 Parent의 위치를 기준으로 삼는다.

• css

.parent {
    /* .. */
    /* .. */

    /*  parent(부모 요소)가 child(자식 요소)의 기준점이 됨 */
    position: relative;
}

/*  position : absolute */
.absolute {
    /* 부모 요소인 parent를 기준으로 위치가 결정된다. */
    position: absolute;
    bottom: 5px;
    right: 5px;
}

• 브라우저 출력 창
  

2-2. 조상 relative & 자식 absolute

Grandparent에게 position 값이 있는 경우 Parent의 한 단계 위인 Grandparent의 위치를 기준으로 삼는다.

• css

.grand-parent {
    /* .. */
    /* .. */

    /* Grand Parent가 child의 기준점이 됨*/
    position: relative;
}

.parent {
    /* .. */
}

/*  position : absolute */
.absolute {
    /* 부모의 부모 요소인 grand-parent를 기준으로 위치가 결정된다. */
    position: absolute;
    bottom: 0px;
    right: 0px;
}

• 브라우저 출력 창

2-3. 조상 Position 없음 & 자식 absolute

부모, 조상 요소 둘다 할당된 Position 값이 없는 경우 (body, html 태그 까지)
widow 객체의 viewport를 기준점으로 삼는다.

• css

.grand-parent {
    /* .. */
}

.parent {
    /* .. */
}

/*  position : absolute */
.absolute {
    /* viewport 기준으로 위치가 결정된다. */
    position: absolute;
    bottom: 0px;
    right: 0px;
}

• 브라우저 출력 창

3. Fixed

뷰포트를 기준으로 삼고 싶은 경우 위의 예시처럼 absolute를 사용해서 구현할 수 있지만, position: fixed를 사용해서 구현이 가능하다.

• html

<div class="grand-parent">
    <div class="parent">
        <div class="child">1</div>
        <div class="child fixed">2</div>
        <div class="child">3</div>
    </div>
</div>

• css

.fixed {
    position: fixed;
    bottom: 30px;
    right: 30px;
}