CSS 포지셔닝
CSS 위치
CSS 위치 속성을 사용하면 레이아웃의 한 부분을 다른 부분과 겹칠 수 있으며 일반적으로 수년 동안 여러 테이블을 사용해야 했던 작업을 수행할 수도 있습니다. 예:
앞에 표시되는 요소를 결정하세요!
요소가 겹칠 수 있습니다!
Positioning
CSS 위치 지정 속성을 사용하면 요소의 위치를 지정할 수 있습니다. 또한 한 요소를 다른 요소 뒤에 배치하고 한 요소의 콘텐츠가 너무 큰 경우 어떻게 되는지 지정할 수 있습니다.
요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 위치를 지정할 수 있습니다. 그러나 위치 속성을 먼저 설정하지 않으면 이러한 속성이 작동하지 않습니다. 위치 지정 방법에 따라 작동 방식도 다릅니다.
네 가지 위치 지정 방법이 있습니다.
정적 위치 지정
HTML 요소의 기본값, 즉 위치 지정이 없으면 요소가 일반적인 흐름으로 나타납니다.
정적으로 배치된 요소는 위쪽, 아래쪽, 왼쪽, 오른쪽의 영향을 받지 않습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
<div class="static">
该元素使用了 position: static;
</div>
</body>
</html>인스턴스 실행 ?
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
고정 위치
요소의 위치는 브라우저 창을 기준으로 고정된 위치입니다.
창을 스크롤해도 이동하지 않습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7和IE8支持只有一个!DOCTYPE指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
참고: 고정 타겟팅 IE7 IE8에서는 다음 사항을 설명해야 합니다! DOCTYPE을 지원할 수 있습니다.
고정 위치 지정은 요소의 위치를 문서 흐름과 독립적으로 만들어 공간을 차지하지 않습니다.
고정 위치 요소가 다른 요소와 겹칩니다.
상대 위치 지정
상대적으로 위치가 지정된 요소는 일반 위치를 기준으로 위치가 지정됩니다.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>
</html>예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
상대적으로 배치된 요소와 겹치는 요소의 내용을 이동할 수 있으며, 원래 차지했던 공간은 변경하지 마십시오.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h2.pos_top
{
position:relative;
top:-50px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_top">This heading is moved upwards according to its normal position</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
상대적으로 배치된 요소는 절대적으로 배치된 요소의 컨테이너 블록으로 사용되는 경우가 많습니다.
절대 위치 지정
절대적으로 위치가 지정된 요소의 위치는 가장 가까운 위치에 있는 상위 요소를 기준으로 합니다. 요소에 위치가 지정된 상위 요소가 없으면 해당 위치는 <html>:
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>This is a heading with an absolute position</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>
</html>예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
절대적인 위치 지정은 요소의 위치를 문서 흐름과 독립적으로 만들어 공간을 차지하지 않습니다.
절대적으로 배치된 요소는 다른 요소와 겹칩니다.
sticky positioning
sticky는 말 그대로 영어로 끈끈하다는 뜻이므로 끈끈한 포지셔닝이라고도 할 수 있습니다.
위치: 고정, 사용자의 스크롤 위치에 따라 배치됩니다.
고정 위치 요소는 사용자의 스크롤에 의존하여 위치:상대 및 위치:고정 위치 간을 전환합니다.
위치:상대적;처럼 동작하며 페이지가 대상 영역을 넘어 스크롤되면 위치:고정처럼 동작하고 대상 위치에 고정됩니다.
요소 위치 지정은 특정 임계값을 넘기 전의 상대적 위치 지정이고 그 이후에는 고정 위치 지정입니다.
이 특정 임계값은 위쪽, 오른쪽, 아래쪽 또는 왼쪽 중 하나를 나타냅니다. 즉, 위쪽, 오른쪽, 아래쪽 또는 왼쪽의 4개 임계값 중 하나를 지정해야만 고정 위치 지정이 적용됩니다. 그렇지 않으면 동작은 상대 위치 지정과 동일합니다.
참고: Internet Explorer, Edge 15 및 이전 IE 버전은 고정 위치 지정을 지원하지 않습니다. Safari에는 -webkit- 접두사가 필요합니다(아래 예 참조).
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>인스턴스를 실행하시겠습니까?
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
겹치는 요소
요소는 문서 흐름과 독립적으로 배치되므로 다른 요소를 오버레이할 수 있습니다. 페이지의 요소
z-index 속성은 요소의 스택 순서(요소가 앞에 배치되어야 하는지 또는 뒤에 배치되어야 하는지)를 지정합니다.
요소는 양수 또는 음수 스택 순서를 가질 수 있습니다.
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html> 예제 실행 »
온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요.
겹침 순서가 높은 요소는 항상 쌓임 순서가 낮은 요소 앞에 옵니다.
참고: 두 개의 위치 지정 요소가 겹치고 Z-색인이 지정되지 않은 경우 HTML 코드의 마지막 위치 요소가 맨 위에 표시됩니다.
예제 더보기
예: 요소의 모양 자르기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140" />
</body>
</html>예제 실행 »
온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요
이 예에서는 요소의 모양을 설정하는 방법을 보여줍니다. 요소가 이 모양으로 잘려 표시됩니다.
예: 스크롤 막대를 사용하여 요소 내의 오버플로 콘텐츠를 표시하는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>
</html>예제 실행»
온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요.
이 예는 다음에 대한 오버플로 속성을 보여줍니다. 스크롤 막대 만들기, 요소의 내용이 지정된 영역에 너무 클 때 맞도록 설정하는 방법.
예: 브라우저 자동 오버플로 처리 설정 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow:auto;
}
</style>
</head>
<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。</p>
<div>
当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。
</div>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
예: 커서 변경
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>将鼠标移动到这些字上改变鼠标样式cursor.</p> <span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br> <span style="cursor:e-resize">e-resize</span><br> <span style="cursor:help">help</span><br> <span style="cursor:move">move</span><br> <span style="cursor:n-resize">n-resize</span><br> <span style="cursor:ne-resize">ne-resize</span><br> <span style="cursor:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
이 예에서는 오버플로를 자동으로 처리하도록 브라우저를 설정하는 방법을 보여줍니다.
모든 CSS 위치 지정 속성
"CSS" 열의 숫자는 해당 속성을 정의하는 CSS(CSS1 또는 CSS2) 버전을 나타냅니다.
| Attribute | Description | Value | CSS |
|---|---|---|---|
| bottom | 위치가 지정된 요소의 아래쪽 여백 경계와 아래쪽 경계 사이의 거리를 정의합니다. 포함하는 블록 오프셋의 | auto길이 % inherit | 2 |
| clip | 절대 위치에 있는 요소 자르기 | shapeauto 상속 | 2 |
| cursor | 지정된 유형으로 커서 이동 표시 | url auto 십자형 default 포인터 move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help | 2 |
| left | 은 위치 지정 요소의 왼쪽 여백 가장자리와 포함 블록의 왼쪽 가장자리 사이의 오프셋을 정의합니다. | auto 길이 % inherit | 2 |
| overflow | 요소의 콘텐츠가 해당 영역을 넘을 때 발생하는 상황을 설정합니다. | 자동 숨김 스크롤 visible inherit | 2 |
| overflow-y | 요소 콘텐츠 영역의 위쪽/아래쪽 가장자리를 넘나드는 콘텐츠를 처리하는 방법을 지정하세요 | 자동 숨김 스크롤 visible no-display no-content | 2 |
| overflow-x | 콘텐츠 영역의 오른쪽/왼쪽 가장자리에 있는 콘텐츠를 처리하는 방법을 지정합니다. 오버플로 요소 | auto hidden scroll visible no-display no-content | 2 |
| position | 요소의 위치 지정 유형을 지정하세요 | absolute fixed relative 정적 상속 | 2 |
| right | 은 위치 지정 요소의 오른쪽 여백 가장자리와 포함 블록의 오른쪽 가장자리 사이의 오프셋을 정의합니다. | auto 길이 % 상속 | 2 |
| top | 은 위치가 지정된 요소의 상단 여백 경계와 포함 블록의 상단 경계 사이의 오프셋을 정의합니다. | auto 길이 % inherit | 2 |
| z-index | 요소의 스택 순서 설정 | number auto 상속 | 2 |
