CSS 레이아웃 - position 속성
- 이전 페이지 CSS max-width
- 다음 페이지 CSS z-index
position 요소의 정위치 방법의 유형(static, relative, fixed, absolute 또는 sticky)에 적용되는 속성을 정의합니다.
position 속성
position 속성은 요소에 적용되는 정위치 방법의 유형을 정의합니다.
다섯 가지 다른 위치 값이 있습니다：
- static
- relative
- fixed
- absolute
- sticky
요소는 top, bottom, left, right 속성을 사용하여 정위치됩니다. 그러나 position 속성을 먼저 설정하지 않으면 이 속성은 작동하지 않습니다. 다른 position 값에 따라 작동 방식도 다릅니다.
position: static;
HTML 요소는 기본적으로 static(정적) 정위치 방식을 사용합니다.
정적 정위치된 요소는 top, bottom, left, right 속성에 영향을 받지 않습니다.
position: static; 요소는 어떠한 특별한 방식으로도 정위치되지 않습니다. 항상 페이지의 정상적인 흐름에 따라 정위치됩니다：
이 CSS를 사용하고 있습니다：
예제
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
position: relative; 요소는 그 정상적인 위치에 대해 정위치됩니다.
절대 정위치된 요소의 top, right, bottom, left 속성을 설정하면 그것이 정상적인 위치에서 벗어나 조정됩니다. 이 요소가 남긴 공간에 맞추어 나머지 내용을 조정하지 않습니다.
이 CSS를 사용하고 있습니다：
예제
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
position: fixed; 요소는 뷰포트에 대한 정위치로 배치됩니다. 이는 페이지를 스크롤할 때도 항상 같은 위치에 있음을 의미합니다. top, right, bottom, left 속성을 이 요소를 정위치하는 데 사용합니다.
고정 정위치된 요소는 페이지에서 일반적으로 배치해야 할 위치에 공간을 남기지 않습니다.
페이지 오른쪽 하단의 이 고정 요소에 주의하세요. 이 CSS를 사용하고 있습니다：
예제
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute;
position: absolute; 요소는 가장 가까운 정위치된 조상 요소에 대해 정위치됩니다(그래서 fixed와 같이 뷰포트에 대한 정위치가 아닙니다).
그러나, 절대 정위치된 요소가 조상이 없으면, 문서 주체(body)를 사용하며 페이지 스크롤과 함께 이동합니다.
주의:“정위치된” 요소는 그 위치가 static 그 외의 모든 요소.
이는 간단한 예제입니다：
이 CSS를 사용하고 있습니다：
예제
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;
}
position: sticky;
position: sticky; 의 요소는 사용자의 스크롤 위치에 따라 정위치됩니다.
스티키 요소는 스크롤 위치에 따라 상대적(relative）과 고정(fixed）사이에서 전환됩니다. 처음에는 상대적 정위치로 설정되어 있으며, 시각적인 화면에서 지정된 이동 위치에 도달할 때까지 유지됩니다 - 그런 다음 적절한 위치에 '粘贴'됩니다(예: position:fixed).
주의:Internet Explorer, Edge 15 및 이전 버전은 스티키 정위치를 지원하지 않습니다. Safari는 -webkit- 프리كس를 필요로 합니다(아래 예제를 참조). 또한, 최소한 지정해야 합니다 top、right、bottom 또는 left 중요한 부분 중 하나로, 스티키 정위치가 작동하기 위해 필요합니다.
이 예제에서는 스크롤 위치에 도달할 때, sticky 요소가 페이지 상단에 남아 있도록 합니다(top: 0）。
예제
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
겹치는 요소
요소를 정위치할 때, 그들은 다른 요소와 겹칠 수 있습니다.
z-index 속성은 요소의 스택 순서를 지정합니다(어떤 요소가 다른 요소 앞에 위치해야 하는지 또는 뒤에 위치해야 하는지).
요소는 양수 또는 음수의 스택 순서를 설정할 수 있습니다:
이것은 제목입니다
이미지의 z-index가 -1이기 때문에 텍스트 뒤에 위치합니다.
예제
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
더 높은 스택 순서를 가진 요소는 항상 더 낮은 스택 순서를 가진 요소 앞에 위치합니다.
주의:두 정위치 요소가 겹치지만 지정되지 않았을 경우 z-index그렇다면 HTML 코드에서 가장 마지막 요소가 상단에 표시됩니다.
이미지 내 텍스트 정위치
이미지에 글자를 배치하는 방법:
예제
개인적으로 시도해보세요：
더 많은 예제
- 요소의 형태 설정
- 이 예제에서는 요소의 형태를 설정하는 방법을 보여줍니다. 요소는 이 형태로 잘려서 표시됩니다.
모든 CSS 정위치 속성
| 속성 | 설명 |
|---|---|
| bottom | 설정 정위치 상자의 하단 외부 마진 경계. |
| clip | 절대 정위치의 요소를 잘라냅니다. |
| left | 정위치 프레임의 좌측 마argins의 외각을 설정합니다. |
| position | 요소의 정위치 유형을 지정합니다. |
| right | 정위치 프레임의 우측 마argins의 외각을 설정합니다. |
| top | 정위치 프레임의 상단 마argins의 외각을 설정합니다. |
| z-index | 요소의 스택 순서를 설정합니다. |
- 이전 페이지 CSS max-width
- 다음 페이지 CSS z-index
