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

CSS ドロップダウンメニューのプロパティ分析: 位置と Z インデックス

PHPz

リリース： 2023-10-20 17:48:23

オリジナル

1071 人が閲覧しました

CSS 下拉菜单属性解析：position 和 z-index

CSS ドロップダウンメニューの属性分析: 位置と z-index

Web デザインでは、ドロップダウンメニューは、より多くのオプションを表示したり、コンテンツを非表示にします。完全なドロップダウンメニューを実装するには、位置と z-index プロパティを習得することが非常に重要です。この記事では、これら 2 つのプロパティを詳細に分析し、具体的なコード例を示します。

1. Position 属性
Position は CSS の重要な属性で、要素の配置方法を定義するために使用されます。ドロップダウンメニューの場合、一般的に使用される配置方法には、相対配置 (相対) と絶対配置 (絶対) があります。

相対配置 (relative): 要素を通常の位置を基準にして配置し、元のスペースを占有します。
コード例:
```
.dropdown-menu {
  position: relative;
}
```
ログイン後にコピー
絶対配置 (absolute): 通常のドキュメントフローから要素を削除し、最も近い位置にある祖先要素を基準にして配置します。存在しない場合は、元の包含ブロックを基準にして配置されます。
コード例:
```
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
}
```
ログイン後にコピー

2. z-index 属性
z-index は、要素間の重なり順を定義するために使用される CSS のプロパティです。ドロップダウンメニューで、他の要素の上に置きたい場合は、z-index 属性を使用する必要があります。

デフォルトのスタック順序:
未定義の z-index を持つ要素のデフォルトのスタック順序は自動です、つまり、DOM 内の順序でスタックされます。
2 つの要素のスタックレベルが同じ場合、後の要素が前の要素を上書きします。
重なり順を設定します:
ドロップダウンメニューの Z インデックス値を大きく設定することで、他の要素の上に配置できます。
コード例:
```
.dropdown-menu {
  position: absolute;
  z-index: 9999;
}
```
ログイン後にコピー

z-index 属性は、位置が相対的、絶対的、または固定である要素に対してのみ有効であることに注意してください。

3. 包括的なアプリケーションの例
ドロップダウンメニューでの位置と Z インデックスのアプリケーションをよりよく理解するために、完全なサンプルコードを以下に示します:

HTML コード:

<div class="dropdown">
  <button class="dropdown-toggle">菜单</button>
  <ul class="dropdown-menu">
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
    <li>选项四</li>
  </ul>
</div>

ログイン後にコピー

CSS コード:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  background: lightgray;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  background: white;
  border: 1px solid lightgray;
  display: none;
  padding: 10px;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  list-style: none;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: lightblue;
}

ログイン後にコピー

上記の例では、ドロップダウンメニュー (.dropdown) のコンテナーは相対位置に設定され、ドロップダウンメニュー自体 (.dropdown) -menu) は絶対位置に設定され、ドロップダウンメニューを他の要素の上に配置できるように z-index 属性を 9999 に設定します。同時に、マウスホバーイベントが追加され、マウスホバー時のドロップダウンメニューの表示と非表示、およびオプションによる背景色の変更効果が実現します。

概要:
position プロパティと z-index プロパティを理解し、正しく適用することで、美しいドロップダウンメニュー効果を簡単に作成し、他の要素の上に配置することができます。これら 2 つのプロパティは、ドロップダウンメニューに限定されず、CSS で幅広い用途に使用できます。この記事が、読者がこれら 2 つの属性をより適切に適用し、Web デザインの効果とユーザーエクスペリエンスを向上させるのに役立つことを願っています。

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