Giá trị tối thiểu và tối đa của chỉ số z?

Tôi có một div trong trang HTML của tôi. Tôi đang hiển thị div này dựa trên một số điều kiện, nhưng div đang hiển thị đằng sau phần tử HTML nơi tôi trỏ con trỏ chuột.

Tôi đã thử tất cả các giá trị cho chỉ mục z từ 0 - 999999. Có ai có thể cho tôi biết lý do tại sao điều này xảy ra không?

Có bất kỳ giá trị tối thiểu hoặc tối đa nào của thuộc tính Z-INDEX của CSS không?

.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>

Tôi đang hiển thị và ẩn div với .divClassonclick thông qua việc <asp:hyperlink>sử dụng jQuery.

┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ 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                       │
└──────────────────────┴───────────────────┴──────────────────────────────────┘

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

'chỉ số z'

Giá trị : tự động | <số nguyên> | thừa kế

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

Một số loại giá trị có thể có giá trị nguyên (ký hiệu là <số nguyên>) hoặc giá trị số thực (ký hiệu là <số>). Số thực và số nguyên chỉ được chỉ định trong ký hiệu thập phân. Một <số nguyên> bao gồm một hoặc nhiều chữ số "0" đến "9". <Số> có thể là <số nguyên> hoặc có thể bằng 0 hoặc nhiều chữ số theo sau là dấu chấm (.) Theo sau là một hoặc nhiều chữ số. Cả số nguyên và số thực có thể được bắt đầu bằng dấu "-" hoặc "+" để biểu thị dấu hiệu. -0 tương đương với 0 và không phải là số âm.

Lưu ý rằng nhiều thuộc tính cho phép số nguyên hoặc số thực làm giá trị thực sự giới hạn giá trị trong một phạm vi nào đó, thường là giá trị không âm.

Vì vậy, về cơ bản không có giới hạn nào cho giá trị chỉ mục z trong tiêu chuẩn CSS, nhưng tôi đoán hầu hết các trình duyệt giới hạn ở giá trị 32 bit đã ký (−2147483648 đến +2147483647) trong thực tế (64 sẽ hơi vượt trội không có ý nghĩa để sử dụng bất cứ thứ gì dưới 32 bit ngày nay)

Các thử nghiệm của tôi cho thấy đó z-index: 2147483647là giá trị tối đa, được thử nghiệm trên FF 3.0.1 cho OS X. Tôi đã phát hiện ra lỗi tràn số nguyên: nếu bạn nhập z-index: 2147483648(là 2147483647 + 1) thì phần tử chỉ đứng sau tất cả các phần tử khác. Ít nhất là trình duyệt không bị sập.

Và bài học để học là bạn nên cẩn thận khi nhập các giá trị quá lớn cho z-indextài sản vì chúng bao quanh.

Giá trị tối thiểu của chỉ số Z là 0 ; giá trị tối đa phụ thuộc vào loại trình duyệt.

Nó phụ thuộc vào trình duyệt (mặc dù phiên bản mới nhất của tất cả các trình duyệt nên tối đa là 2147483638), cũng như phản ứng của trình duyệt khi vượt quá mức tối đa.

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

Đó là giá trị tối đa của số nguyên 32 bit: 2147483647

Đồng thời xem các tài liệu: https://www.w3.org/TR/CSS22/visuren.html#z-index (Cho phép số âm)

Theo kinh nghiệm, tôi nghĩ mức tối đa chính xác z-indexlà 2147483638.

Z-Index chỉ hoạt động cho các yếu tố có position: relative;hoặcposition: absolute; áp dụng cho chúng. Nếu đó không phải là vấn đề, chúng ta cần xem một trang ví dụ để hữu ích hơn.

EDIT: Bác sĩ giỏi đã đưa ra lời giải thích đầy đủ nhất nhưng phiên bản nhanh là tối thiểu là 0 vì nó không thể là số âm và tối đa - tốt, bạn sẽ không bao giờ thực sự cần phải vượt quá 10 cho hầu hết các thiết kế.

Tôi đã thấy rằng thường thì nếu chỉ số z không hoạt động vì cha mẹ / anh chị em của nó không có chỉ số z được chỉ định.

Vì vậy, nếu bạn có:

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

mục số 3, hoặc thậm chí số 4, có thể đang cạnh tranh # 2 cho không gian nhấp / di chuột, mặc dù nếu bạn đặt # 1 thành z-index 0, các anh chị em có chỉ số z đặt chúng vào ngăn xếp độc lập giờ đây sẽ nằm trong cùng một ngăn xếp và sẽ chỉ số z đúng.

Điều này có một mô tả hữu ích và khá nhân bản: http://foohack.com/2007/10/top-5-css-mistakes/  

Một người dùng ở trên nói "tốt, bạn sẽ không bao giờ thực sự cần phải vượt quá 10 cho hầu hết các thiết kế."

Tùy thuộc vào dự án của bạn, bạn có thể chỉ cần chỉ mục z 0-1 hoặc chỉ mục z 0-10000. Bạn thường sẽ cần chơi ở các chữ số cao hơn ... đặc biệt nếu bạn đang làm việc với người xem hộp đèn (9999 dường như là tiêu chuẩn và nếu bạn muốn đứng đầu chỉ số z của họ, bạn sẽ cần phải vượt quá!)

Mặc dù INT_MAXcó lẽ là đặt cược an toàn nhất, WebKit rõ ràng sử dụng gấp đôi nội bộ và do đó cho phép số lượng rất lớn (với độ chính xác nhất định).LLONG_MAXví dụ: hoạt động tốt (ít nhất là trong Chromium 64-bit và WebkitGTK), nhưng sẽ được làm tròn thành 9223372036854776000.

(Mặc dù bạn nên cân nhắc kỹ xem bạn có thực sự, thực sự cần nhiều chỉ số z này không).