ページ レイアウトを行ったことがある学生は、z-index 属性についてよく知っているはずです。Z-index は、Web ページ表示のための特別な属性です。モニターに表示されるパターンは 2 次元平面であるため、位置属性を表す x 軸と y 軸があります。表示要素の上下の重ね順などの三次元概念を表現するために、z軸の違いを表現するz-index属性が導入されています。要素の重ね合わせ順序における上下の三次元関係を示します。
大きい z インデックス値を持つ要素は、小さい z インデックス値を持つ要素に重ねられます。このプロパティを指定しないで配置されたオブジェクトの場合、正の Z インデックス値を持つオブジェクトはその上にあり、負の Z インデックス値を持つオブジェクトはその下にあります。 (推奨チュートリアル: CSS ビデオ チュートリアル )
<div style="width:200px;height:200px;background-color:#0e0;"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;"><div>2 つの p、2 つ目は 50 ピクセル上に移動します。通常の状況は次のようになります。このように
2番目のpが最初のpをカバーし、2番目のpにz-index属性を追加します
<div style="width:200px;height:200px;background-color:#0e0;"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;z-index:-5;"><div>結果は次のようになります。 z-index の最も単純なアプリケーションは次のようになります。
z-index 属性は次のように適用されます。位置決めされた要素 (位置属性値が相対、絶対、または固定であるオブジェクト) は、表示画面に垂直な方向 (Z 軸と呼ばれます) での位置決めされた要素の重なり順を決定するために使用されます。設定された z-index は無効になります。
<div style="width:200px;height:200px;background-color:#0e0;z-index:30"></div> <div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;z-index:10;"><div>
最初の p の z-index は 2 番目の p の z-index よりも大きいですが、最初の p は位置決めされておらず、その z-index 属性が機能しないため、それでも 2 番目の p によってカバーされます。 p. .
同じ z に対して実際には 2 つの状況があります。 index
1. どちらの要素も配置されておらず位置が重なっている場合、または両方の要素が配置されていて z-index が同じである場合、要素の位置は重なっており、ドキュメント フローの順序に従って、後の方が優先されます。前のものが上書きされます。
<div style="position:relative;width:200px;height:200px;background-color:#0e0;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;"><div>
#2. どちらの要素にも z-index が設定されていない場合は、デフォルト値が使用され、一方は位置決めされ、もう一方は位置決めされず、位置決めされた要素がカバーされます。配置されていない要素
<div style="position:relative;top:50px;width:200px;height:200px;background-color:#0e0;"></div> <div style=" width:100px;height:100px;background-color:#00e;"><div>
親要素の z-index が有効な場合、子要素はz-index が設定されているかどうかに関係なく、要素は親要素と一致します。親要素よりも上になります
<div style="position:relative;width:200px;height:200px;background-color:#0e0;z-index:10;">
<div style="position:relative;width:100px;height:100px;background-color:#00e;z-index:-5;"><div>
</div>子要素は親要素よりも小さい z-index を設定しますが、子要素は依然として親要素の上に表示されます
親要素の z-index が無効な場合 (配置されていない、またはデフォルト値を使用していない)、要素の z-index 設定は配置された子要素が有効になります
<div style="position:relative;width:200px;height:200px;background-color:#0e0;">
<div style="position:relative;width:100px;height:100px;background-color:#00e;z-index:-5;"><div>
</div>子要素の z-index=-5 が有効になり、親要素によって上書きされます
兄弟要素の z-index が有効な場合、その子要素のカバレッジ関係は親要素によって決まります
<div style="position:relative;width:100px;height:100px;background-color:#0e0;z-index:5;">
<div style="position:relative;width:50px;height:250px;background-color:#00e;z-index:50;"></div>
</div>
<div style="position:relative;width:100px;height:100px;background-color:#0e0;z-index:10;margin-top:4px;">
<div style="position:relative;width:30px;height:150px;background-color:#e0e;z-index:-10;"></div>
</div>Z-index最初の p の子要素のインデックスは比較的高く、その親要素の z-index が 2 番目の p よりも低いため、最初の p の子要素は 2 番目の p とその子要素によって置き換えられます。
写个简单的例子看看
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
html,body
{
height:100%;
width:100%;
padding:0;
margin:0;
}
.menu
{
background-color:#0e0;
position:relative;
z-index:10;
}
.options
{
display:none;
position:absolute;
top:
z-index:30;
}
.options div
{
background-color:#00e;
}
</style>
</head>
<body>
<table border="1" cellpadding="4px" cellspacing="0">
<tr>
<th>Name</th>
<th>Age</th>
<th>Options</th>
</tr>
<tr>
<td>Byron</td>
<td>24</td>
<td>
<div class="menu" >
<div>Options</div>
<div class="options" style="display:block;position:absolute;top:20px;">
<div>Opion1</div>
<div>Opion2</div>
<div>Opion3</div>
<div>Opion4</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Byron</td>
<td>24</td>
<td>
<div class="menu">
<div>Options</div>
<div class="options" >
<div>Opion1</div>
<div>Opion2</div>
<div>Opion3</div>
<div>Opion4</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Byron</td>
<td>24</td>
<td>
<div class="menu">
<div>Options</div>
<div class="options" >
<div>Opion1</div>
<div>Opion2</div>
<div>Opion3</div>
<div>Opion4</div>
</div>
</div>
</td>
</tr>
</table>
</body>
<html>| 期望样式 |  |
实际样式 |  |
这时候习惯于增大options 的z-index却发现于事无补，为什么呢？因为每个menu的z-index相同，它们的层叠顺序按文档流顺序，无论子元素z-index调到多大，上面menu的options还是会被下面menu遮盖。这时候我的做法一般是把options放到外面，所有的menu用一个，使menu与options没有父子关系，或者干脆在点击menu的时候把它的z-index调大，这样其子元素就不会被遮盖住了。
本文的例子都是以符合W3C的Chrome浏览器做验证，但在IE6，7 z-index的默认值并不是auto而是0，这样会导致很多奇怪现象，这时候就需要考虑这点了。
更多编程相关知识，请访问：编程入门！！
以上がCSS z-index の詳細な分析 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
