使用 CSS 与 Z 索引重叠元素-css教程-PHP中文网

首页

web前端

css教程

使用 CSS 与 Z 索引重叠元素

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 01, 2023 am 10:37 AM

使用 CSS Z-Index 属性，开发人员可以将元素堆叠在一起。 Z-Index 可以有正值或负值。

注意 - 如果重叠的元素没有指定 z-index，则该元素将显示文档最后提到。

示例

让我们看一个 z-index 属性的示例 -

强> 现场演示

<!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属性的示例：

实时演示

<!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删除

CSS动画：很难创建它们吗？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@KeyFrames CSS：最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcssanimations.keytricksinclude：1）definingsmoothtransitionsbetnestates，2）使用AnimatingmatematingmultationmatingMultationPropertiessimultane，3）使用使用4）使用BombingeNtibalibility，4）使用BombingingWithjavofofofofofoffo

CSS计数器：自动编号的综合指南May 07, 2025 pm 03:45 PM

CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1）他们可以使用forterablesofcontents，ListItems，and customnumbering.2）AdvancedsincludenestednumberingSystems.3）挑战挑战InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4）创造性