ค่าต่ำสุดและสูงสุดของดัชนีซี?

ฉันมี div ในหน้า HTML ของฉัน ฉันกำลังแสดง div นี้ตามเงื่อนไขบางอย่าง แต่ div แสดงอยู่หลังองค์ประกอบ HTML ที่ฉันชี้เคอร์เซอร์เมาส์

ฉันได้ลองใช้ค่าทั้งหมดสำหรับดัชนี z ตั้งแต่ 0 - 999999 ใครสามารถบอกฉันได้ว่าทำไมสิ่งนี้ถึงเกิดขึ้น

มีค่าต่ำสุดหรือสูงสุดของคุณสมบัติ Z-INDEX ของ CSS หรือไม่

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

ฉันกำลังแสดงและซ่อน div ด้วย.divClassonclick ผ่านการ<asp:hyperlink>ใช้ 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

'ดัชนี z'

ค่า : อัตโนมัติ | <integer> | สืบทอด

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

บางประเภทค่าอาจมีค่าจำนวนเต็ม (แสดงโดย <integer>) หรือค่าจำนวนจริง (แสดงโดย <number>) ตัวเลขจริงและจำนวนเต็มถูกระบุในรูปแบบทศนิยมเท่านั้น <integer> ประกอบด้วยตัวเลขหนึ่งหลักขึ้นไป "0" ถึง "9" <ตัวเลข> อาจเป็น <integer> หรืออาจเป็นศูนย์หรือมากกว่านั้นตามด้วยจุด (.) ตามด้วยหนึ่งหรือมากกว่าหนึ่งหลัก ทั้งจำนวนเต็มและจำนวนจริงอาจนำหน้าด้วย "-" หรือ "+" เพื่อระบุสัญลักษณ์ -0 เทียบเท่ากับ 0 และไม่ใช่จำนวนลบ

โปรดทราบว่าคุณสมบัติหลายอย่างที่อนุญาตให้เป็นจำนวนเต็มหรือจำนวนจริงเป็นค่าจริง ๆ จำกัด ค่าให้บางช่วงมักจะเป็นค่าที่ไม่เป็นลบ

ดังนั้นโดยทั่วไปไม่มีข้อ จำกัด สำหรับค่าดัชนี z ในมาตรฐาน CSS แต่ฉันเดาว่าเบราว์เซอร์ส่วนใหญ่ จำกัด ให้ลงนามค่าแบบ 32 บิต (−2147483648 ถึง +2147483647) ในทางปฏิบัติ (64 อาจจะเล็กน้อยด้านบนและมัน ไม่สมเหตุสมผลที่จะใช้อะไรน้อยกว่า 32 บิตในวันนี้)

การทดสอบของฉันแสดงว่าz-index: 2147483647เป็นค่าสูงสุดทดสอบบน FF 3.0.1 สำหรับ OS X ฉันค้นพบข้อผิดพลาดล้นจำนวนเต็ม: ถ้าคุณพิมพ์z-index: 2147483648(ซึ่งคือ 2147483647 + 1) องค์ประกอบจะอยู่ด้านหลังองค์ประกอบอื่น ๆ ทั้งหมด อย่างน้อยเบราว์เซอร์ก็ไม่ผิดพลาด

และบทเรียนที่ต้องเรียนรู้คือคุณควรระวังการป้อนค่าที่มีขนาดใหญ่เกินไปสำหรับz-indexคุณสมบัติเพราะมันล้อมรอบ

ค่าต่ำสุดของดัชนี Zคือ0 ; ค่าสูงสุดขึ้นอยู่กับประเภทของเบราว์เซอร์

ขึ้นอยู่กับเบราว์เซอร์ (แม้ว่าเบราว์เซอร์ทุกเวอร์ชันควรมีขนาดสูงสุดที่ 2147483638) เช่นเดียวกับปฏิกิริยาของเบราว์เซอร์เมื่อเกินค่าสูงสุด

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

มันเป็นค่าสูงสุดของจำนวนเต็ม 32 บิต: 2147483647

ดูเอกสาร: https://www.w3.org/TR/CSS22/visuren.html#z-index ด้วย (อนุญาตให้ใช้ตัวเลขติดลบได้)

จากประสบการณ์ฉันคิดว่าค่าสูงสุดที่ถูกต้องz-indexคือ 2147483638

ดัชนี Z ใช้ได้กับองค์ประกอบที่มีposition: relative;หรือposition: absolute;ใช้กับพวกเขาเท่านั้น หากนั่นไม่ใช่ปัญหาเราจะต้องเห็นหน้าตัวอย่างเพื่อเป็นประโยชน์มากขึ้น

แก้ไข: แพทย์ที่ดีได้ใส่คำอธิบายอย่างเต็มที่แล้ว แต่ฉบับย่อก็คือขั้นต่ำคือ 0 เพราะมันไม่สามารถเป็นจำนวนลบและจำนวนสูงสุด - ดีคุณจะไม่ต้องไปมากกว่า 10 สำหรับการออกแบบส่วนใหญ่

ฉันพบว่าบ่อยครั้งหาก z-index ไม่ทำงานเนื่องจากพ่อแม่ / พี่น้องไม่มีดัชนี z ที่ระบุ

ดังนั้นถ้าคุณมี:

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

รายการ # 3 หรือแม้กระทั่ง # 4 อาจเป็นการแข่งขันที่ # 2 สำหรับพื้นที่คลิก / โฮเวอร์แม้ว่าคุณจะตั้งค่า # 1 เป็น z-index 0 แล้วพี่น้องที่เป็นดัชนี z วางไว้ในกองอิสระตอนนี้จะอยู่ในกองซ้อนเดียวกัน และจะดัชนี z อย่างถูกต้อง

สิ่งนี้มีคำอธิบายที่เป็นประโยชน์และมีมนุษยธรรมอย่างเป็นธรรม: http://foohack.com/2007/10/top-5-css-mistakes/  

ผู้ใช้ข้างต้นกล่าวว่า "ดีคุณจะไม่ต้องสูงกว่า 10 สำหรับการออกแบบส่วนใหญ่"

คุณอาจต้องการดัชนี z 0-1 หรือดัชนี z 0-10000 ทั้งนี้ขึ้นอยู่กับโครงการของคุณ คุณมักจะต้องเล่นเป็นตัวเลขที่สูงกว่า ... โดยเฉพาะอย่างยิ่งถ้าคุณทำงานกับผู้ชม Lightbox (9999 ดูเหมือนว่าจะเป็นมาตรฐานและถ้าคุณต้องการดัชนี z ของพวกเขาด้านบนคุณจะต้องเกิน!)

ในขณะที่INT_MAXน่าจะเป็นทางออกที่ปลอดภัยที่สุด WebKit ใช้คู่ภายในและจึงช่วยให้ตัวเลขขนาดใหญ่มาก (เพื่อความแม่นยำแน่นอน) LLONG_MAXเช่นทำงานได้ดี (อย่างน้อยใน Chromium 64 บิตและ WebkitGTK) แต่จะถูกปัดเศษเป็น 9223372036854776000

(แม้ว่าคุณควรพิจารณาอย่างรอบคอบว่าคุณจริงๆจริงๆต้องนี้ดัชนี Z จำนวนมาก ... )