CSS 위치잡기(Positioning)

Positioning can be tricky sometimes!

Decide which element to display in front!

Elements can overlap!

Positioning

CSS position 속성은 요소에 사용되는 위치 결정 방법의 유형을 지정합니다.

5 가지 다른 위치 값이 있습니다.:

static : 기본값
relative
fixed
absolute
sticky

요소는 top, bottom, left, 및 right 속성을 사용하여 위치 될 수 있다. 그러나, position 속성이 먼저 설정되어 있지 않으면 이러한 속성이 작동하지 않습니다. 이들은, 또한, positioning 방법에 따라 다르게 작동한다.

Static Positioning

HTML 요소는 기본적으로 정적 배치(positioned static)됩니다. 정적으로 위치가 지정된(static positioned) 요소는 항상 페이지의 기본적인 흐름에 따라 배치된다.

Static positioned 요소는 top, bottom, left, 및 right 속성에 의해 영향을 받지 않습니다.

고정된(Fixed) Positioning

position:fixed 요소는 뷰포트에 상대적으로 배치되므로 페이지가 스크롤 되더라도 항상 같은 위치에 유지됩니다.

This <div> element has position: fixed;

페이지 오른쪽 하단에 fixed 요소가 있습니다. 사용되는 CSS는 다음과 같습니다.:

Example

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

Try it yourself »

상대적(Relative) 위치

상대적 위치(relative positioned) 요소는 정상 위치에 대하여 상대적으로 위치된다.

Example

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

Try it yourself »

상대적으로 위치가 지정된(relatively positioned) 요소의 내용이 움직여서 다른 요소와 중첩될 수 있지만, 요소가 보유한 공간은 여전히 기본적인 흐름에서 보존 될 것이다.

Example

h2.pos_top {
position: relative;
top: -50px;
}

Try it yourself »

상대 위치가 지정된 요소는 종종 절대 위치 요소에 대한 컨테이너 블록으로 사용된다.

절대적(Absolute) 위치

절대적(absolute) 위치 요소는 정적(static)이 아닌 위치를 가지는 부모 요소(parent element)에 상대적으로 위치된다. 이러한 요소가 없으면, 그를 담는 블록은 <html>이다 :

Example

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

Try it yourself »

절대 위치 요소는 정상 흐름에서 제거됩니다. 절대 위치 요소가 존재하지 않는 것처럼 문서 및 기타 요소가 작동합니다. 따라서, 절대 위치 요소는 다른 요소들과 겹쳐질 수 있습니다.

position: sticky;

position: sticky; 요소는 사용자의 스크롤 위치를 기준으로 배치됩니다.

sticky 요소는 스크롤 위치에 따라 relative 와 fixed 사이를 전환합니다. 주어진 오프셋 위치가 뷰포트에서 충족 될 때까지 상대적(position:relative)으로 배치된 다음, 주어진 위치에 "고정(stick)" 됩니다 (position:fixed 처럼).

다음 예에서, 스크롤 위치에 도달하면 "sticky" 요소가 페이지 상단(top: 0)에 고정됩니다.

Example

div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}

Try it Yourself »

중첩 요소

요소가 정상 흐름의 외부에 위치 될 때, 이들은 다른 요소들에 중첩 될 수있다.

z-index 속성은 요소의 스택 순서 (어떤 요소가 앞에 오고, 또는 뒤에 오는지)을 지정합니다.

요소는 positive 또는 negative 스택의 순서를 가질 수있다 :

Example

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

Try it yourself »

큰 스택 순서를 갖는 요소가 낮은 스택 순서를 가진 요소의 앞에 온다.

	Note: 두 개의 위치 요소가 지정된 z-index 없이 겹치는 경우, HTML 코드의 마지막에 위치하는 요소가 위에 표시됩니다.

이미지에 텍스트 위치시키기

Example

Bottom Left

Top Left

Top Right

Bottom Right

Centered

Try it yourself:

Top Left » Top Right » Bottom Left » Bottom Right » Centered »

More Examples

Set the shape of an element
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.

All CSS Positioning Properties

Property	Description
bottom	Sets the bottom margin edge for a positioned box
clip	Clips an absolutely positioned element
cursor	Specifies the type of cursor to be displayed
left	Sets the left margin edge for a positioned box
overflow	Specifies what happens if content overflows an element's box
position	Specifies the type of positioning for an element
right	Sets the right margin edge for a positioned box
top	Sets the top margin edge for a positioned box
z-index	Sets the stack order of an element

« Previous Next Chapter »