>웹 프론트엔드 >프런트엔드 Q&A >Z-색인 속성이란 무엇입니까?

Z-색인 속성이란 무엇입니까?

藏色散人
藏色散人원래의
2021-04-19 11:51:5120476검색

z-index 속성은 요소의 스택 순서를 설정하는 데 사용되는 CSS의 속성입니다. 스택 순서가 높은 요소는 항상 스택 순서가 낮은 요소 앞에 오고 요소는 음수 z-index 속성 값을 가질 수 있습니다. .

Z-색인 속성이란 무엇입니까?

이 기사의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터, CSS3 버전.

z-index 속성은 요소의 스택 순서를 설정합니다. 더 높은 스택 순서를 가진 요소는 항상 더 낮은 스택 순서를 가진 요소 앞에 나타납니다.

참고: 요소는 음수 Z-색인 속성 값을 가질 수 있습니다.

참고: Z-색인은 위치가 지정된 요소(예: position:absolute;)에서만 작동합니다!

Description

이 속성은 Z축을 따라 배치된 요소의 위치를 ​​설정합니다. Z축은 표시 영역에 수직으로 확장되는 축으로 정의됩니다. 양수이면 사용자에게 더 가까워지고, 음수이면 사용자에게서 멀어진다.

기본값: auto

상속: no

버전: CSS2

JavaScript 구문: object.style.zIndex="1"

가능한 값

auto 기본값. 스택 순서는 상위 요소와 동일합니다.

number는 요소의 스택 순서를 설정합니다.

inherit는 z-index 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

【추천 학습: css 동영상 튜토리얼

Example

이미지의 z-index 설정:

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img  src="/i/eg_smile.gif" / alt="Z-색인 속성이란 무엇입니까?" >
<p>由于图像的 z-index 是 -1,因此它在文本的后面出现。</p>
</body>
</html>

효과:

Z-색인 속성이란 무엇입니까?

위 내용은 Z-색인 속성이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.