CSS Layout (레이아웃) - position 속성

2023. 1. 30. 11:53

화면의 레이아웃을 위해 css의 position 속성에 대하여 알아보자!

position속성

요소에 사용되는 위치 지정 방법의 유형을 지정합니다.

top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다.

static
relative
fixed
absolute
sticky

사용법은 간단합니다.

기준을 잡는다. (예- position: relative;)
이동시킨다. (예- top: 50px;)

요소를 옮기려면 일단 위치를 옮길 기준점을 잡는다.

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

static

html 요소를 기본적으로 정적으로 배치된다.

정적으로 배치된 요소는 top, bottom, left 및 right 속성의 영향을 받지 않습니다.

static 속성값은 특별한 방식으로 배치되지 않는다.

항상 페이지의 정상적인 흐름에 따라 배치된다.

아래 예제는 브라우저 페이지의 정상적인 흐름에 따라 요소가 배치된 상태이다.

relative

요소 자기 자신을 기준으로 배치한다.

상대적으로 배치된 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정하면 원래 위치에서 벗어나 조정됩니다.

다른 콘텐츠는 요소가 남긴 간격에 맞게 조정되지 않습니다.

div 태그 포함 및 안에 있는 요소들 까지 왼쪽으로 30px 간격으로 normal position 에 대하여 상대적 배치를 하였다.

absolute

요소를 일반적인 문서 흐름에서 제거한다.

가장 가까운 position 속성을 가지고 있는 조상태그를 기준으로 위치가 지정된다.

조상 요소 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.

조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(<body>요소)를 기준으로 삼는다.

(static을 제외한 값)문서 상 원래 위치를 잃어버린다. (아래에 있는 div가 해당 자리를 차지한다)

1. 부모 relative & 자식 absolute

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>

css 코드

Parent의 위치를 기준으로 삼는다.

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

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

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

브라우저 결과 화면

부모인 안쪽 <div class="parent">를 기준으로 삼는다.

2. 조상 relative & 자식 absolute

Grandparent에게 Position 값이 있는 경우?

한 단계 올라가서 GrandParent의 Postion값을 찾아서 기준점으로 삼는다.

css코드

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

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

.parent {
    /* .. */
}

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

브라우저 결과 화면

부모의 부모인 바깥쪽 <div class="grand-parent">를 기준으로 삼는다.

3. 조상 Position 없음 & 자식 absolute

부모, 조상 전부 뒤져봐도 Position 값이 없는 경우? (Parent, GrandParent, <body>태그, <html>태그까지 )

window 객체의 viewport를 기준점으로삼는다. (DOM : Document Object Model)

css 코드

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

.parent {
    /* .. */
}

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

브라우저 결과 화면

뷰포트를 기준으로 삼는다.

fixed

뷰포트(보여지는 화면)를 기준으로 배치가 된다.

absolute를 사용해서 똑같이 구현할 수 있지만,

absolute는 조상 요소의 위치를 기준점으로 삼는 개념이므로, 뷰포트를 기준으점으로 삼으려면 fixed를 사용한다.

요소를 일반적인 문서 흐름에서 제거한다.

페이지 레이아웃에 어떠한 공간도 배정하지 않는다.

뷰포트를 기준점으로 붙어있다 (== 화면에 붙어있다.)

즉 페이지가 스크롤 되더라도 항상 같은 위치에 유지한다.

top, right, bottom, left 속성은 요소를 배치하는데 사용된다.

스크롤을 움직이면 항상 하단의 div 박스가 따라온다. 보통 쇼핑몰 홈페이지에서 많이 볼 수 있다.

참고사이트 : https://creamilk88.tistory.com/197, https://www.w3schools.com/css/css_positioning.asp

'Web > CSS' 카테고리의 다른 글

fontello 사용법과 원리 (0)	2023.03.22
CSS 표 적용하기 (0)	2023.01.27
CSS List (목록) (0)	2023.01.27
CSS 아이콘, 부트 스트랩 아이콘, 구글 아이콘 사용방법 (0)	2023.01.27
Google Fonts (구글 글꼴) (0)	2023.01.27

doornuddle