CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用して要素をZ-Indexとオーバーラップさせる

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-Indexとオーバーラップさせる

例

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>

出力

上記のコードの出力は次のとおりです-

CSSを使用して要素をZ-Indexとオーバーラップさせる


  1. CSSを使用したz-indexプロパティを使用したレイヤーでの要素のスタック

    CSS Z-Indexプロパティを使用すると、開発者は要素を相互にスタックできます。 Z-Indexには、正の値または負の値を指定できます。 注- 重複する要素にz-indexが指定されていない場合、その要素はドキュメントの最後に記載されている要素として表示されます。 z-indexプロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style> p {    background: url("https://www.tutorialspoint.com/arang

  2. CSSを使用したテキストインデント

    CSS text-indentプロパティは、要素の最初の行のインデントを設定するのに役立ちます。 構文 CSStext-indentプロパティの構文は次のとおりです- Selector {    text-indent: /*value*/ } 例 次の例は、CSSのtext-indentプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> div {    display: flex;    float: left;