5

私は Web ページを作成していdivます。たとえば、A と B の 2 つの があります。A の位置はfixedで、ページの上にありますが、B の位置はabsolute、ページの真ん中のどこかにあります。オーバーラップするとBがAの上にくるけど、これは逆であってほしい。私はAに何かの上に来てもらいたいのですが、それを行う方法がわかりません。

配置を変更することはできませんのでご注意ください。

前もって感謝します。:)

4

6 に答える 6

5

z-indexcss 設定を使用して、非静的に配置された要素の順序を変更できます。

div#A { z-index: 2; }
div#B { z-index: 1; }

A が B の上に表示されます。

于 2013-03-15T19:15:46.980 に答える
3

z-index 値を使用して、レイヤーに応じて調整します。そのスタイル プロパティ: style="z-index:200"....

于 2013-03-15T19:15:06.453 に答える
2

注: z-index は、配置された要素 ( position:absoluteposition: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 で修正されました。

于 2013-03-15T19:32:15.983 に答える
1

CSSを使用して、DivAに高いZインデックスを与えます。

#a{
  z-index: 100;  
}

これは、Div Aが他のすべての要素/ほとんどの要素の上に確実に留まるということを意味します。値が高いほど、ページ上にある他の要素の数に応じて、他のすべての要素よりも上になる可能性が高くなります。複数の要素に対してより正確なオーバーラップ制御が必要な場合は、特定のz-index値を要素に割り当てます。値が高いほど、要素の上位になります。マイナス値を使用することもできます。

于 2013-03-15T19:30:36.403 に答える
1

オーバーラップが実際にある場合は、css メディア クエリを使用してプロパティ値を変更できます。

または、javascript を使用して重複するかどうかをテストします。これはいつかあなたが書いたアプローチです:https://github.com/yckart/jquery.overlaps.js

于 2013-03-15T19:19:28.027 に答える
1

A にz-indexB よりも大きなプロパティを指定します。

div.a {
    z-index:2;
}
div.b {
    z-index:1;
}

MDN でz-indexesが何をするかについて読むことができますが、一言で言えば、「要素が重なっている場合、z-order によって、どちらが他の要素をカバーするかが決まります。一般に、z-index が大きい要素は、z-index が小さい要素をカバーします。 ."

于 2013-03-15T19:15:37.570 に答える