CSS 계단식 속성 분석: Z-색인 및 위치
- 王林원래의
- 2023-10-20 09:27:331367검색
CSS 계단식 속성 분석: z-index 및 position
CSS에서 z-index와 position은 일반적으로 사용되는 두 가지 계단식 속성으로, 요소의 스택 순서와 위치를 제어하는 데 사용됩니다. 이 기사에서는 이 두 가지 속성을 자세히 분석하고 관련 코드 예제를 제공합니다.
1. z-index 속성
z-index 속성은 요소의 스택 순서를 제어하는 데 사용됩니다. 정수 값을 매개변수로 허용합니다. 값이 클수록 요소가 더 높게 표시됩니다. 기본적으로 요소의 z-index 값은 0입니다.
구문: z-index: 숫자 값;
위치가 지정된 요소(즉, 위치 값이 상대, 절대 또는 고정인 요소)만 Z-index 속성을 사용할 수 있다는 점에 유의해야 합니다. 위치가 지정된 요소의 z-index 속성은 해당 하위 요소와 기타 상위 및 형제 요소의 표시 순서에 영향을 줍니다.
다음은 z-index 속성의 사용을 보여주는 예입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
z-index: 1;
}
#div2 {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
top: 50px;
left: 50px;
z-index: 2;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>위 코드에서 div1과 div2는 각각 두 개의 위치 지정 요소입니다. div2의 z-index 값이 더 크므로 div2가 div1을 덮습니다. 위에 표시된.
2. 위치 속성
위치 속성은 요소의 위치를 제어하는 데 사용됩니다. 일반적인 값은 정적, 상대, 절대 및 고정입니다.
- 정적: 기본값입니다. 요소는 일반적인 문서 흐름 레이아웃을 따르며 특별한 위치 지정을 거치지 않습니다.
- relative: 상대 위치 지정. 요소는 일반 위치를 기준으로 배치됩니다. 요소의 위치는 위쪽, 아래쪽, 왼쪽, 오른쪽 속성을 통해 조정할 수 있습니다.
- 절대: 절대 위치 지정. 요소는 가장 가까운 위치에 있는 조상을 기준으로 위치가 지정되거나, 위치가 지정된 조상이 없는 경우 원래 포함 블록을 기준으로 위치가 지정됩니다.
- fixed: 위치가 고정되었습니다. 요소는 브라우저 창을 기준으로 배치되며 페이지를 스크롤하더라도 해당 위치는 변경되지 않습니다.
다음은 position 속성의 사용을 보여주는 예입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: 50px;
left: 50px;
}
#div2 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>위 코드에서 div2는 position:absolute 속성을 사용하여 div1을 기준으로 위치를 지정합니다. 상단 및 왼쪽 속성의 값을 조정하여 div2의 위치를 변경할 수 있습니다.
요약:
z-index 및 position은 CSS에서 일반적으로 사용되는 스택 속성으로 요소의 스택 순서와 위치를 제어할 수 있습니다. 이 두 가지 속성을 합리적으로 활용함으로써 풍부하고 다양한 페이지 레이아웃 효과를 얻을 수 있습니다.
위 내용은 CSS 캐스케이딩 속성 z-index 및 위치 분석과 관련 코드 예제입니다. 도움이 되길 바랍니다.
위 내용은 CSS 계단식 속성 분석: Z-색인 및 위치의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!