서문: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!