CSS 포지셔닝

CSS 위치 지정

CSS 위치 지정 속성을 사용하면 요소의 위치를 지정할 수 있습니다. 또한 한 요소를 다른 요소 뒤에 배치하고 한 요소의 콘텐츠가 너무 큰 경우 어떻게 되는지 지정할 수 있습니다.

요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 위치를 지정할 수 있습니다. 그러나 위치 속성을 먼저 설정하지 않으면 이러한 속성이 작동하지 않습니다. 위치 지정 방법에 따라 작동 방식도 다릅니다.

위치 지정 방법에는 네 가지가 있습니다.

정적 위치 지정

HTML 요소의 기본값, 즉 위치 지정이 없으면 요소가 일반 흐름으로 나타납니다.

정적으로 배치된 요소는 위쪽, 아래쪽, 왼쪽, 오른쪽의 영향을 받지 않습니다.

고정 위치

요소의 위치는 브라우저 창을 기준으로 고정됩니다.

창을 스크롤해도 움직이지 않습니다.

<!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>

프로그램을 실행하여 사용해 보세요

상대 위치 지정

상대 위치에 있는 요소는 정상 위치를 기준으로 위치가 지정됩니다.

예제

 <!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>

프로그램을 실행해서 사용해 보세요

상대적으로 배치된 요소와 서로 겹치는 요소의 내용은 이동할 수 있으며 원래 차지하는 공간은 변경되지 않습니다.

<!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>

상대적으로 배치된 요소는 절대적으로 배치된 요소의 컨테이너 블록으로 사용되는 경우가 많습니다.

절대 위치 지정

절대적으로 위치가 지정된 요소의 위치는 가장 가까운 위치에 있는 상위 요소를 기준으로 합니다. 요소에 위치가 지정된 상위 요소가 없으면 해당 위치는 다음을 기준으로 합니다.

<!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>

프로그램을 실행합니다. 시도해 보세요

절대적인 위치 지정은 요소의 위치를 문서 흐름과 독립적으로 만들어 공간을 차지하지 않습니다.

절대적으로 배치된 요소는 다른 요소와 겹칩니다.

겹치는 요소

요소는 문서 흐름과 독립적으로 배치되므로 페이지의 다른 요소와 겹칠 수 있습니다.

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="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" 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>
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>

run 프로그램을 시도하는 프로그램을 사용해보십시오. 시도해 볼 수 있는 프로그램

지속적인 학습

새로운 파일

<!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="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="100" height="140" /> <p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p> </body> </html>

제출하다 코드 재설정

자동운전