マルチレイヤーオーバーレイ効果を実現する CSS 位置レイアウト方法

マルチレイヤー オーバーレイ効果を実現する CSS 位置レイアウト方法には特定のコード例が必要です

Web デザインでは、多くの場合、マルチレイヤー オーバーレイ効果を実現し、さまざまな要素を組み合わせる必要があります。要素はさまざまな階層に表示されます。 CSS は、この効果を実現するのに役立つさまざまな位置決めプロパティを提供します。この記事では、CSS Positions レイアウトを使用してマルチレイヤー オーバーレイ効果を実現する方法を検討し、対応するコード例を示します。

1. 絶対配置

絶対配置は、CSS で最も一般的に使用される配置方法の 1 つです。絶対配置を使用すると、最も近い非静的に配置された祖先要素を基準にして要素を配置できます。

コード例:

HTML:

<div class="container">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
</div>

CSS:

.container {
  position: relative;
  width: 400px;
  height: 400px;
}

.layer1, .layer2, .layer3 {
  position: absolute;
  width: 100px;
  height: 100px;
}

.layer1 {
  background: red;
  top: 0;
  left: 0;
}

.layer2 {
  background: green;
  top: 50px;
  left: 50px;
}

.layer3 {
  background: blue;
  top: 100px;
  left: 100px;
}

上記のコードでは、コンテナ要素を作成し、相対位置に設定します(位置: 相対)、コンテナ内に 3 つのレイヤー要素を作成し、それぞれが絶対位置 (位置: 絶対) に設定されました。レイヤー要素の top プロパティと left プロパティを調整すると、レイヤー要素がコンテナ内で垂直方向と水平方向の中央に表示されます。オーバーレイ効果を実現するために、レイヤー要素ごとに背景色が異なります。

2. 固定配置

固定配置は特別な絶対配置方法であり、要素の位置を固定に設定することで、ページが要素も常に指定された位置に留まります。

コード例:

HTML:

<div class="container">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
</div>

CSS:

.container {
  width: 100%;
  height: 1000px;
}

.layer1, .layer2, .layer3 {
  position: fixed;
  width: 100px;
  height: 100px;
}

.layer1 {
  background: red;
  top: 0;
  left: 0;
}

.layer2 {
  background: green;
  top: 50px;
  left: 50px;
}

.layer3 {
  background: blue;
  top: 100px;
  left: 100px;
}

上記のコードでは、コンテナ要素を作成し、その幅を 100% に設定します。 、高さは1000pxです。次に、コンテナ内に 3 つのレイヤー要素が作成され、これも固定位置 (位置: 固定) に設定されました。 top プロパティと left プロパティを設定して、ブラウザ ウィンドウの左上隅を基準にしてレイヤー要素を配置します。

3. 相対配置

相対配置とは、要素を通常の位置に対して相対的に配置することです。相対的に配置された要素は、通常のドキュメント フローに従って配置されます。

コード例:

HTML:

<div class="container">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
</div>

CSS:

.container {
  width: 400px;
  height: 400px;
}

.layer1, .layer2, .layer3 {
  position: relative;
  width: 100px;
  height: 100px;
}

.layer1 {
  background: red;
  top: 0;
  left: 0;
  z-index: 3;
}

.layer2 {
  background: green;
  top: 50px;
  left: 50px;
  z-index: 2;
}

.layer3 {
  background: blue;
  top: 100px;
  left: 100px;
  z-index: 1;
}

上記のコードでは、コンテナ要素を作成し、3 つのレイヤー要素に対して、位置プロパティを相対に設定します。 top 属性と left 属性を設定してレイヤー要素の位置を調整します。z-index 属性はレイヤーの階層関係を決定するために使用されます。

概要:

CSS 位置レイアウトを使用すると、マルチレイヤー オーバーレイ効果を実現できます。オーバーレイ効果を実現するには、絶対配置、固定配置、および相対配置をすべて使用できます。使用される特定の配置方法は、特定のニーズに応じて異なります。コードを記述するときは、これらの配置プロパティを柔軟に使用し、他の CSS プロパティと組み合わせて、目的のオーバーレイ効果を実現する必要があります。

以上がマルチレイヤーオーバーレイ効果を実現する CSS 位置レイアウト方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。