私は Web ページを作成していdiv
ます。たとえば、A と B の 2 つの があります。A の位置はfixed
で、ページの上にありますが、B の位置はabsolute
、ページの真ん中のどこかにあります。オーバーラップするとBがAの上にくるけど、これは逆であってほしい。私はAに何かの上に来てもらいたいのですが、それを行う方法がわかりません。
配置を変更することはできませんのでご注意ください。
前もって感謝します。:)
z-index
css 設定を使用して、非静的に配置された要素の順序を変更できます。
div#A { z-index: 2; }
div#B { z-index: 1; }
A が B の上に表示されます。
z-index 値を使用して、レイヤーに応じて調整します。そのスタイル プロパティ: style="z-index:200"....
注: z-index は、配置された要素 ( position:absolute、position:relative、またはposition:fixed ) でのみ機能します。
<html>
<div id="divA" style="width:100%; height:50px; z-index:2; position:fixed; background-color: red">
</div>
<div id="divB" style="width:100%; height:50px; z-index:1; position:absolute; top:30px; left:20px; background-color:green ">
</div>
</html>
divA は divB の上に表示されます (z-index プロパティのため)。ただし、div の位置プロパティを必ず定義してください。これは、位置を削除すると機能しません: divA で修正されました。
CSSを使用して、DivAに高いZインデックスを与えます。
#a{
z-index: 100;
}
これは、Div Aが他のすべての要素/ほとんどの要素の上に確実に留まるということを意味します。値が高いほど、ページ上にある他の要素の数に応じて、他のすべての要素よりも上になる可能性が高くなります。複数の要素に対してより正確なオーバーラップ制御が必要な場合は、特定のz-index値を要素に割り当てます。値が高いほど、要素の上位になります。マイナス値を使用することもできます。
オーバーラップが実際にある場合は、css メディア クエリを使用してプロパティ値を変更できます。
または、javascript を使用して重複するかどうかをテストします。これはいつかあなたが書いたアプローチです:https://github.com/yckart/jquery.overlaps.js
A にz-index
B よりも大きなプロパティを指定します。
div.a {
z-index:2;
}
div.b {
z-index:1;
}
MDN でz-indexesが何をするかについて読むことができますが、一言で言えば、「要素が重なっている場合、z-order によって、どちらが他の要素をカバーするかが決まります。一般に、z-index が大きい要素は、z-index が小さい要素をカバーします。 ."