HTML5 위치 지정 유형은 무엇입니까?-프런트엔드 Q&A-php.cn

HTML5 위치 지정 유형은 무엇입니까?

青灯夜游

풀어 주다： 2022-01-11 11:18:24

원래의

5404명이 탐색했습니다.

HTML5에는 5가지 유형의 위치 지정이 있습니다. 1. 절대 위치 지정(절대), 2. 상대 위치 지정(상대), 4. 고정 위치 지정(고정), .

HTML5 위치 지정 유형은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

html5

위치의 여러 위치 지정 방법은 상위 블록을 기준으로 블록 수준 요소의 위치와 자체 위치를 기준으로 위치를 설정합니다.

1 절대 위치 지정(절대)

기능:

상위 요소가 없는 경우 참조 개체는 전체 문서입니다.
기본적으로 참조 개체는 위치가 지정된 상위 요소입니다.
절대적으로 위치가 지정된 요소를 추가하면 전체 문서에서 벗어나게 됩니다. 레이아웃 흐름 및 레이아웃 공간 파괴

문서 흐름에서 절대적으로 위치가 지정된 요소를 드래그하고 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타 속성을 사용하여 가장 가까운 상위 요소를 기준으로 절대 위치 지정을 수행합니다. 요소의 부모는 그렇지 않습니다. 위치 지정 속성을 설정할 때 위치 지정은 본문 요소의 왼쪽 상단을 기준으로 합니다. 절대 위치에 있는 요소는 쌓을 수 있으며, z-index 속성을 통해 쌓는 순서를 제어할 수 있습니다. z-index 값은 단위가 없는 정수로, 큰 것이 맨 위에 오며 음수 값을 가질 수 있습니다.

절대 위치 지정 위치 지정 방법: 상위 요소가 위치:상대 또는 위치:절대 및 위치:고정과 같이 정적 이외의 위치를 설정하는 경우 상위 요소를 기준으로 위치가 지정되고 위치가 왼쪽으로 전달됩니다. , top, right 및 Bottom 속성은 상위 요소에 위치 지정 세트가 없는 경우 상위 요소의 상위 요소에 위치 지정 세트가 있는지 여부에 따라 달라지도록 규정합니다. 즉, 위치 지정은 정적 위치 지정 이외의 위치 지정이 설정된 첫 번째 조상 요소를 기준으로 합니다. 모든 조상 요소에 위의 세 가지 위치 지정 중 하나가 없으면 문서 본문( 브라우저 창을 기준으로 하는 것이 아니라 창을 기준으로 한 위치가 고정됩니다.

<head>
	<style type="text/css">
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: absolute;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="box" >One</div>
	<div class="box  two" >Two</div>
	<div class="box" >Three</div>
	<div class="box">Four</div>
</body>

로그인 후 복사

왼쪽 상단에서 class="two" 50px로 div를 배치합니다. 다른 요소의 레이아웃이 변경되고 이 요소의 원래 위치에 공백이 남지 않습니다.

HTML5 위치 지정 유형은 무엇입니까?

2. 상대 위치 지정(상대 위치는 유체이탈 장면과 동일)

특징:

참조 개체가 자체 기본 위치입니다.
점유 공간
레이아웃 흐름을 파괴하지 않습니다.

상대적으로 배치된 요소는 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타 속성을 기반으로 일반 문서 흐름에서 오프셋됩니다. Z-색인 계층적 디자인을 사용할 수도 있습니다.

<head>
	<style type="text/css">
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: relative;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="box" >One</div>
	<div class="box  two" >Two</div>
	<div class="box" >Three</div>
	<div class="box">Four</div>
</body>

로그인 후 복사

원래 위치에서 왼쪽 상단에서 class="two" 50px 떨어진 곳에 div를 배치하세요. 다른 요소의 레이아웃은 변경되지 않지만 이 요소의 원래 위치에 빈 공간이 남습니다.

HTML5 위치 지정 유형은 무엇입니까?

3. 고정 위치 지정(고정)

특징:

참조 개체는 브라우저 창입니다.

고정 위치 지정은 절대 위치 지정과 유사하지만 브라우저 창을 기준으로 위치가 지정됩니다. , 스크롤 막대를 사용하여 스크롤하지 않습니다.

고정 위치 지정의 가장 일반적인 용도 중 하나는 여백, 테두리 또는 패딩을 사용하지 않고 페이지에 고정 머리글, 고정 바닥글 또는 고정 사이드바를 만드는 것입니다.

브라우저 창의 왼쪽, 오른쪽, 위쪽 및 아래쪽 중앙에 요소를 배치하는 방법:

방법 1:

position:fixed
left:50%;
top:50%;
margin-left: -盒子宽度的一半
margin-top:-盒子高度的一半

로그인 후 복사

방법 2:

position:fixed;
left:0;
right:0
top:0
bottom:0
margin:auto

로그인 후 복사

4 고정 위치 지정(고정에는 호환성 문제가 있음)

특징:

상대와 고정의 조합입니다.
페이지가 스크롤 막대를 트리거하지 않으면 실행 효과는 위치: 상대이고, 그렇지 않으면 위치: 고정입니다.
응용 프로그램은 다음과 같습니다. : 페이지 천장

<!DOCTYPE html>
<html>
	<meta charset="utf8">
	<head>
		<style>
			section:first-child {
				height: 200px;
				background-color: lightgray;
			}

			section:nth-child(2) {
				height: 100px;
				background-color: orange;
				position: sticky;
				position: -webkit-sticky;
				top: 50px;
			}

			section:nth-child(3) {
				height: 300px;
				background-color: lightgray;
			}

			section:nth-child(4) {
				height: 100px;
				background-color: orange;
				position: sticky;
				position: -webkit-sticky;
				top: 150px;
			}

			section:last-child {
				height: 500px;
				background-color: darkgray;
			}
		</style>
	</head>
	<body>
		<section>SECTION-1</section>
		<section>SECTION-2</section>
		<section>SECTION-3</section>
		<section>SECTION-4</section>
		<section>SECTION-5</section>
	</body>
</html>

로그인 후 복사

HTML5 위치 지정 유형은 무엇입니까?