CSS カスケードプロパティ分析: Z インデックスと位置-CSSチュートリアル-php.cn

CSS カスケードプロパティ分析: Z インデックスと位置

王林

リリース： 2023-10-20 09:27:33

オリジナル

1497 人が閲覧しました

CSS 层叠属性解析：z-index 和 position

CSS カスケード属性分析: z-index とposition

CSS では、z-index とposition は要素の位置を制御するためによく使用される 2 つのカスケード属性です。 . 積み重ねる順序と位置。この記事では、これら 2 つのプロパティを詳細に分析し、関連するコード例を示します。

1. z-index 属性

z-index 属性は、要素の積み重ね順序を制御するために使用されます。パラメータとして整数値を受け取り、値が大きいほど要素が上位に表示されます。デフォルトでは、要素の z-index 値は 0 です。

構文: z-index: 数値;

z-index 属性を使用できるのは、位置指定された要素 (つまり、位置の値が相対、絶対、または固定である要素) だけであることに注意してください。位置決めされた要素の z-index 属性は、その子要素と他の親要素および兄弟要素の表示順序に影響します。

以下は、z-index 属性の使用を示す例です:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  width: 200px;
  height: 200px;
  background-color: red;
  z-index: 1;
}

#div2 {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: relative;
  top: 50px;
  left: 50px;
  z-index: 2;
}
</style>
</head>
<body>

<div id="div1"></div>
<div id="div2"></div>

</body>
</html>

ログイン後にコピー

上記のコードでは、div1 と div2 はそれぞれ 2 つの位置決め要素であり、z-index 値はdiv2 は大きいので、div2 は div1 の上を覆って表示します。

2. Position 属性

position 属性は、要素の配置方法を制御するために使用されます。一般的な値は、静的、相対、絶対、固定です。

静的: デフォルト値。要素は通常のドキュメントフローレイアウトに従い、特別な配置は行われません。
relative: 相対的な位置決め。要素は、通常の位置を基準にして配置されます。要素の位置は、top、bottom、left、right 属性によって調整できます。
absolute: 絶対的な位置決め。要素は、最も近くに配置された祖先、または配置された祖先がない場合は元の包含ブロックを基準にして配置されます。
fixed: 位置を修正しました。要素はブラウザウィンドウを基準にして配置され、ページがスクロールされてもその位置は変わりません。

次は、position 属性の使用方法を示す例です。

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
  top: 50px;
  left: 50px;
}

#div2 {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  top: 100px;
  left: 100px;
}
</style>
</head>
<body>

<div id="div1"></div>
<div id="div2"></div>

</body>
</html>

ログイン後にコピー

上記のコードでは、div2 は、position:absolute 属性を使用して、div1 を基準にして位置を決めています。 topとleft属性の値を調整することでdiv2の位置を変更できます。

概要:

z-index とposition は CSS で一般的に使用されるスタックプロパティで、要素のスタック順序と位置を制御できます。これら 2 つの属性を合理的に使用することで、豊かで多様なページレイアウト効果を実現できます。

上記は、CSS カスケードプロパティの z-index とposition の分析と、関連するコード例です。それが役に立てば幸い。

以上がCSS カスケードプロパティ分析: Z インデックスと位置の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。