CSS 위치 지정 속성에 대한 자세한 소개(예제 포함)

서문: CSS를 사용하여 페이지를 레이아웃하고 아름답게 만드는 과정에서 위치 속성이 자주 사용됩니다. 그럼 다음으로 position 속성에 대해 자세히 소개하겠습니다.

추천 비디오 튜토리얼: css 비디오 튜토리얼

먼저 HTML 파일을 작성하고 CSS를 사용하여 여러 줄의 콘텐츠를 세로로 가운데에 배치합니다.

<div class="wrap">
    <div class="content">
    <h1>hello world</h1>
    <h2>HELLO WORLD</h2>
    <h3>层叠样式表</h3>
    </div>
</div>

다음으로 레이아웃과 조판에 CSS를 사용합니다:

.wrap{
width:100%;
height:400px;
display:table;
}
.content{
display:table-cell;
vertical-align:table;
text-align:center;
}

위치 속성:

一, 정적 위치 지정/일반 위치 지정/자연스러운 위치 지정 정적

기능: 자연스러운 흐름에 요소 위치 지정

기능:

1, 위쪽, 아래쪽, 왼쪽, 오른쪽 또는 Z-색인 선언 무시

2, 인접한 두 요소에 여백이 설정된 경우 마지막 여백 = 둘 다 가장 큰 여백이 있는 요소의 경우 ,

3, 너비와 높이 값이 고정된 경우 왼쪽 및 오른쪽 여백이 자동으로 설정되면 왼쪽 및 오른쪽 여백이 자동으로 확장되어 나머지 너비를 채우므로 블록이 가로 중앙에 배치됩니다.

2. 상대 위치 지정 상대적

Function

: 요소를 위치 지정 가능한 상위 요소로 만듭니다.

Features

:

1

, 상대 위치 지정에 위쪽/오른쪽/아래쪽/왼쪽/z-인덱스를 사용할 수 있습니다. 자연 흐름에서 상대 요소의 위치

2

, 자연 흐름에서 상대적으로 위치된 요소의 위치는 유지됩니다

3

, 모든 요소를 ​​상대 요소로 설정할 수 있으며 절대 위치에 있는 하위 요소는 다음과 같습니다. 이를 기준으로 절대 위치 지정을 수행하고

4

, 부동 요소를 오프셋하고(두 개의 부동 요소에 대한 t/r/b/l의 잘못된 설정 문제 해결) 스택 순서를 제어할 수 있습니다

3. 위치 절대

Function

: 요소가 자연스러운 흐름에서 벗어나도록 만들기

Features

:

1

, 자연스러운 흐름에서 벗어나기

2

, 크기의 백분율을 가장 가까운 위치 지정 가능 조상 요소

3

. lrtb가 0으로 설정되면 가장 가까운 위치 지정 가능 조상 요소의 모든 측면에 정렬됩니다(가로 및 세로 중심 맞춤 트릭에서 파생됨)

4

. 가장 가까운 위치 지정 가능 조상 요소는 위치 지정 가능 조상으로 간주됩니다. 요소

5

, z-index는 스택 순서를 제어할 수 있습니다.

4. 고정 위치 고정

Function

: 절대 위치 지정과 유사

기능

:

1

, 브라우저 뷰포트 위치 지정

2

을 기준으로 고정 위치 지정 요소는 뷰포트 스크롤에 따라 스크롤되지 않습니다.

3

, 절대 특성을 상속

위치를 사용하여 수직 달성 하위 요소 중심 맞추기

<div class="wrap">
    <div class=""content></div>
</div>

.wrap {
	width: 200px;
	height: 200px;
	background: blue;
	position: relative;
}
.content {
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto auto;
}

위 내용은 CSS 위치 지정 속성에 대한 자세한 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!