CSSを使用したZインデックスを持つ要素の重複-CSSチュートリアル-php.cn

CSSを使用したZインデックスを持つ要素の重複

WBOY

リリース： 2023-09-01 10:37:01

転載

554 人が閲覧しました

CSS Z-Index プロパティを使用すると、開発者は要素を互いに積み重ねることができます。 Z インデックスには正または負の値を指定できます。

Note - 重複する要素で 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>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>

ログイン後にコピー