CSS를 사용하여 Z 인덱스가 있는 요소 겹치기-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS를 사용하여 Z 인덱스가 있는 요소 겹치기

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 01, 2023 am 10:37 AM

CSS Z-Index 속성을 사용하여 개발자는 요소를 함께 쌓을 수 있습니다. Z-Index는 양수 또는 음수 값을 가질 수 있습니다.

Note - 겹치는 요소가 Z-색인을 지정하지 않으면 해당 요소는 문서의 마지막 언급을 표시합니다.

Example

z-index 속성의 예를 살펴보겠습니다 -

强> Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
div{
   margin: auto;
   position: absolute;
   top:0;
   left: 0;
   right: 0;
   bottom: 0;
}
div:first-child {
   background-color: orange;
   width: 270px;
   height: 120px;
   z-index: -2;
}
div:last-child {
   width: 250px;
   height: 100px;
   z-index: -1;
   background-color: turquoise;
}
</style>
</head>
<body>
<div></div>
<p>Fortran was originally developed by a team at IBM in 1957 for scientific calculations...................</p>
<div>
</div>
</body>
</html>

출력

위 코드의 출력은 다음과 같습니다.

使用 CSS 与 Z 索引重叠元素

예제

z-index 속성의 또 다른 예를 살펴보겠습니다.

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   background: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg");
   background-origin: content-box;
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow: 0 0 3px black;
   padding: 20px;
   background-origin: border-box;
}
</style>
</head>
<h2 id="Demo">Demo</h2>
<body>
<p>This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text.</p>
</body>
</html>

출력

다음은 출력입니다. 위 코드 출력-

使用 CSS 与 Z 索引重叠元素

위 내용은 CSS를 사용하여 Z 인덱스가 있는 요소 겹치기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 tutorialspoint에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

슬라이드 아웃 바닥 글Apr 09, 2025 am 11:50 AM

마크 업이라는 매혹적인 새 사이트가 방금 시작되었습니다. 태그 라인 : Big Tech가 당신을보고 있습니다. 우리는 큰 기술을보고 있습니다. 위의 위대한 일. 그만큼

좋아하는 페이지Apr 09, 2025 am 11:47 AM

나는 다른 날 JavaScript로 RSS 피드를 구문 분석하는 것에 대해 게시했습니다. 또한 RSS 설정에 대해 Feedbin이 어떻게 핵심인지에 대해 이야기했습니다.

Codepen Gutenberg Embed Block for Sanity.io를 재현합니다Apr 09, 2025 am 11:43 AM

Chris Coyier의 WordPress의 Gutenberg 편집기 구현에서 영감을 얻은 Sanity Studio를위한 미리보기로 사용자 정의 코드펜 블록을 만드는 방법에 대해 알아보십시오.

CSS와 라인 차트를 만드는 방법Apr 09, 2025 am 11:36 AM

라인, 바 및 파이 차트는 대시 보드의 빵과 버터이며 모든 데이터 시각화 툴킷의 기본 구성 요소입니다. 물론 SVG를 사용할 수 있습니다

접근 가능한 색상 조합을 생성하기 위해 SASS를 프로그래밍합니다Apr 09, 2025 am 11:30 AM

우리는 항상 웹에 더 액세스 할 수 있도록하고 있습니다. 색상 대비는 수학 일 뿐이므로 Sass는 디자이너가 놓친 에지 케이스를 다룰 수 있습니다.

SVG에서 타탄 패턴을 생성하는 정적 사이트를 만드는 방법Apr 09, 2025 am 11:29 AM

타탄은 일반적으로 스코틀랜드, 특히 세련된 킬트와 관련된 패턴의 천입니다. tartanify.com에서 우리는 5,000 개가 넘는 타탄을 모았습니다

PHP 템플릿에 대한 후속 조치Apr 09, 2025 am 11:14 AM

얼마 전, PHP 템플릿에 대해 PHP (기본적으로 HEREDOC 구문)에 대해 게시했습니다. 나는 문자 그대로 그 기술을 사용하여 슈퍼 기본을 사용합니다

부트 스트랩 구성 요소가있는 모달 이미지 갤러리 생성Apr 09, 2025 am 11:10 AM

다른 사진을보기 위해 탐색으로 더 큰 버전의 이미지를 열어주는 웹 페이지의 이미지를 클릭 한 적이 있습니까?

See all articles

핫 AI 도구

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.