CSS-レイヤー

CSSを使用すると、さまざまな部門のレイヤーを作成できます。 CSSレイヤーは、互いに重なり合う要素に_z-index_プロパティを適用することを指します。

レイヤーの効果を作成するには、z-indexプロパティを_position_プロパティとともに使用します。どの要素を上に配置し、どの要素を下に配置するかを指定できます。

z-indexプロパティは、より複雑なWebページレイアウトを作成するのに役立ちます。以下は、CSSでレイヤーを作成する方法を示す例です。

<html>
   <head>
   </head>

   <body>
      <div style = "background-color:red;
         width:300px;
         height:100px;
         position:relative;
         top:10px;
         left:80px;
         z-index:2">
      </div>

      <div style = "background-color:yellow;
         width:300px;
         height:100px;
         position:relative;
         top:-60px;
         left:35px;
         z-index:1;">
      </div>

      <div style = "background-color:green;
         width:300px;
         height:100px;
         position:relative;
         top:-220px;
         left:120px;
         z-index:3;">
      </div>
   </body>
</html>

それは次の結果を生成します-

Css-layers

CSS-レイヤー