web-dev-qa-db-ja.com

Z-indexの最小値と最大値

HTMLページにdivがあります。このdivを何らかの条件に基づいて表示していますが、divはHTML要素の後ろに表示されており、そこでマウスカーソルをポイントしています。

私は0から999999までのz-indexのすべての値を試してみました。誰がこれが起こっているのか教えてもらえますか？

CSSのZ-INDEXプロパティの最小値または最大値はありますか？

.divClass {
     position: absolute; 
     left: 25px; 
     top: 25px; 
     width: 320px;
     height: 300px; 
     z-index: 1000; 
}
<table cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td>
      <asp:HyperLink ID="lnkProgram" runat="server"></asp:HyperLink>
    </td>
  </tr>
  <tr>
     <td>
         <div class="divClass">
           Some Data
         </div>
     </td>
  </tr> 
</table>

JQueryを使用して.divClassを介して<asp:hyperlink> onclickでdivを表示および非表示にしています。

htmlcssz-index
456
Sachin Gaur
┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ Browser              │ Max z─index value │ When exceeded, value changes to: │
╞══════════════════════╪═══════════════════╪══════════════════════════════════╡
│ Firefox 0 - 2        │ 2147483647        │ element disappears               │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 3            │ 2147483647        │ 0                                │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 4+           │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 0 - 3         │ 16777271          │ 16777271                         │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 4+            │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Internet Explorer 6+ │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Chrome 29+           │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Opera 9+             │ 2147483647        │ 2147483647                       │
└──────────────────────┴───────────────────┴──────────────────────────────────┘
311
Behnam Mohammadi

http://www.w3.org/TR/CSS21/visuren.html#z-index

'z-index'

Value：auto | <整数>受け継ぐ

http://www.w3.org/TR/CSS21/syndata.html#numbers

いくつかの値型は整数値（<integer>で表される）または実数値（<number>で表される）を持つことができます。実数と整数は10進表記でのみ指定されます。 <整数>は1つ以上の数字 "0"から "9"で構成されます。 <番号>は<整数>でも、0個以上の数字の後にドット（。）と1個以上の数字を続けることもできます。符号を示すために、整数と実数の両方の前に " - "または "+"を付けることができます。 -0は0と同じで、負の数ではありません。

値として整数または実数を許可する多くのプロパティは、実際には値をある範囲に制限し、多くの場合負でない値に制限します。

したがって、基本的にCSS標準ではz-index値に制限はありませんが、ほとんどのブラウザでは実際には符号付き32ビット値（-2147483648から+2147483647）に制限されています最近32ビット以下のものを使うのは意味がありません。

294
Tamas Czinege

私のテストでは、z-index: 2147483647がOS XのFF 3.0.1でテストされた最大値であることが示されています。整数オーバーフローのバグを発見しました：z-index: 2147483648（2147483647 + 1）他のすべての要素の背後。少なくともブラウザはクラッシュしません。

そして、学ぶべき教訓は、z-indexプロパティに大きな値を入力することに注意する必要があるということです。

152
Ran

Z-index の最小値は、 0 です。最大値はブラウザの種類によって異なります。

enter image description here

22
Santosh Khalse

これは32ビット整数の最大値です。2147483647

ドキュメントも参照してください。 https://www.w3.org/TR/CSS22/visuren.html#z-インデックス

21
magikMaker

経験上、正しい最大z-indexは2147483638だと思います。

21
Mohammad

最大数を超えた場合のブラウザの反応と同様に、ブラウザによって異なります（ただし、すべてのブラウザの最新バージョンは最大2147483638です）。

http://www.puidokas.com/max-z-index/ /

21
pdr

Z-Indexは、position: relative;またはposition: absolute;が適用されている要素に対してのみ機能します。それが問題ではない場合は、もっと役立つようにサンプルページを見る必要があります。

編集：良い医者はすでに十分な説明を入れていますが、クイックバージョンは負の数と最大値にすることはできませんので最小値は0です - まあ、あなたは本当にほとんどのデザインの10を超える必要はありません。

12
roborourke

上記のユーザーは、「ほとんどのデザインで10を超える必要はない」と述べています。

プロジェクトによっては、必要なのはz-indexes 0-1、またはz-indexes 0-10000だけです。特にライトボックスビューアを使って作業している場合は（9999が標準的で、Zインデックスを超えたい場合はそれを超える必要があります。）

5
Rocky

私は、z-indexが機能していない場合、その親/兄弟が指定されたz-indexを持っていないことが多いことを発見しました。

あなたが持っているのであれば：

<div id="1">
    <a id="2" style="z-index:2"></a>
    <div id="3" style="z-index:1"></div>
    <button id="4"></button>
</div>

＃1をz-index 0に設定した場合、z-indexの兄弟がそれらを独立したスタックに入れるようになったとしても、item＃3、または＃4でさえクリック/ホバースペースのために＃2を競うかもしれません。そして正しくz-indexを行います。

これは有用で、かなり人間化された説明があります： http://foohack.com/2007/10/top-5-css-mistakes/

5
kcar

奇妙なことに、Firebugのようなエディタを使用していてz-indexに大きな数値を入力した場合、ブラウザは挿入された最大値を最大値で置き換えます。

0
Diego Mariano

INT_MAXがおそらく最も安全な方法ですが、WebKitは明らかに内部で倍精度を使用しているため、 非常に大きい の数を（一定の精度で）許可します。 LLONG_MAX例（少なくとも64ビットChromiumとWebkit GTKでは）正常に動作しますが、9223372036854776000に丸められます。

（あなたが本当にあなたが本当にそうであるかどうか、慎重に検討すべきですが、 本当に はこのzインデックスを必要とします…）。

0
Creshal