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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

王林

Oct 20, 2023 am 09:27 AM

cssz-indexpositionカスケードプロパティ

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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか？Apr 23, 2025 am 09:57 AM

まあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

私はリリースがないように感じます：正気な展開への旅Apr 23, 2025 am 09:19 AM

馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。