Z- इंडेक्स का न्यूनतम और अधिकतम मूल्य?

Question

मेरे HTML पेज में एक div है। मैं इस div को कुछ कंडीशन के आधार पर दिखा रहा हूँ, लेकिन div HTML एलिमेंट के पीछे प्रदर्शित हो रहा है जहाँ मैंने माउस कर्सर को इंगित किया था।

मैंने 0 - 999999 से z- इंडेक्स के लिए सभी मूल्यों की कोशिश की है। क्या कोई मुझे बता सकता है कि ऐसा क्यों हो रहा है?

क्या सीएसएस की 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 दिखा रहा हूँ और छुपा रहा हूँ ।

Comments

समस्या शायद z-index के साथ विशेष रूप से नहीं है। क्या आप कुछ उदाहरण HTML और सीएसएस दे सकते हैं जो व्यवहार को दिखाता है? आप इसे किस ब्राउज़र में अनुभव कर रहे हैं?

— रोरीफ

सिर्फ ब्याज से बाहर आप टेबल का उपयोग किए बिना एक ही चीज़ की कोशिश कर सकते हैं, बस कुछ सामग्री, लिंक और div। जब आप विकास कर रहे हों, तो केवल निश्चित होने के लिए div पर एक पृष्ठभूमि रंग डालें।

— रॉबोरके

"0 - 999999 से Z-INDEX संपत्ति के लिए सभी मूल्य की कोशिश की"। मेरे लिए इस पर भरोसा करना मुश्किल है।

— संपतश्री

@ क्रामिया मैं नहीं, वह जेएस के साथ 0-999999 के बीच सभी z- इंडेक्स मानों की कोशिश कर सकता है ... बस एक विकल्प ...

— FullHumanProgrammer

किसी ने वास्तव display: noneमें अपने सीएसएस में उल्लेख नहीं किया है ?

— मार्क बैजेंस

Answer 1

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

Comments

मेरा मानना ​​है कि वह नकारात्मक है।

— गेविन

आप इन पर कैसे आए?

— 2540625

मोबाइल सफ़ारी / क्रोम / फ़ायरफ़ॉक्स के लिए कोई नंबर?

— 2540625

रुचि रखने वालों के लिए, 2,147,483,647 = 2^31 - 1। यह एक मेर्सन प्राइम है।

— रेगि पिंकहम

@BhnamMohammadi, मानक व्यवहार हालांकि क्या होना चाहिए?

— पेसियर

Answer 2

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

'Z- सूचकांक'

मूल्य : ऑटो | <पूर्णांक> | इनहेरिट

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

कुछ मान प्रकार में पूर्णांक मान (<पूर्णांक> द्वारा चिह्नित) या वास्तविक संख्या मान हो सकते हैं (<संख्या> द्वारा चिह्नित)। वास्तविक संख्या और पूर्णांक केवल दशमलव संकेतन में निर्दिष्ट हैं। एक <पूर्णांक> में एक या अधिक अंक "0" से "9" होते हैं। एक <नंबर> या तो एक <पूर्णांक> हो सकता है, या यह एक या एक से अधिक अंकों के बाद शून्य या अधिक अंक हो सकता है। पूर्णांक और वास्तविक संख्या दोनों संकेत को इंगित करने के लिए "-" या "+" से पहले हो सकते हैं। -0 0 के बराबर है और एक ऋणात्मक संख्या नहीं है।

ध्यान दें कि कई गुण जो एक पूर्णांक या वास्तविक संख्या को एक मूल्य के रूप में अनुमति देते हैं, वास्तव में मूल्य को कुछ सीमा तक सीमित करते हैं, अक्सर एक गैर-नकारात्मक मूल्य के लिए।

तो मूल रूप से CSS मानक में z- इंडेक्स मान के लिए कोई सीमाएँ नहीं हैं, लेकिन मुझे लगता है कि अधिकांश ब्राउज़र इसे 32-बिट मान (values2147483648 से [phone]) में व्यवहार करने के लिए सीमित करते हैं (64 शीर्ष से थोड़ा दूर होगा, और यह शीर्ष पर होगा) इन दिनों 32 से कम बिट्स का उपयोग करने का कोई मतलब नहीं है)

Comments

यह ध्यान रखना महत्वपूर्ण है कि सफारी 3 पर अधिकतम जेड-इंडेक्स मूल्य 16777271 था। यह सफारी 4 में 32-बिट मानक तक उठाया गया था, इसलिए यह केवल एक चिंता का विषय है यदि आप पुराने ब्राउज़रों को लक्षित कर रहे हैं। इसके अलावा, सफारी 3 में भी 16777271 से ऊपर कुछ भी छाया हुआ है, इसलिए जब तक आप कई तत्वों को ऑर्डर करने के लिए बेतुके बड़े z- इंडेक्स मानों का उपयोग नहीं कर रहे हैं, तब तक आपको कोई समस्या नहीं होनी चाहिए (यानी एक तत्व को 21474864647 के z- इंडेक्स वैल्यू पर सेट करना यह सुनिश्चित करेगा कि तत्व किसी भी ब्राउज़र में सबसे ऊपर रहता है, जब तक कि यह किसी अन्य तत्व के साथ प्रतिस्पर्धा नहीं करता है जिसमें एक z-index> 16777271 भी है)।

— डॉकटोर जे

@DoktorJ क्या कोई जानता है कि यह 16777271 क्यों है? यह विचित्र लगता है कि यह 24-बिट अहस्ताक्षरित पूर्णांक की सीमा से 56 अधिक है।

— जूल

@ जैक वेबकीट देव एरिक सेडेल के अनुसार , वह 24-बिट बिटफील्ड का उपयोग करने का परिणाम था -log base 2 (lg) = lg(16777271)

— Janosch

@Janosch क्षमा करें, मुझे समझ नहीं आया। lg (16777271) 24 से अधिक है। मैंने सोचा होगा कि एक 24-बिट बिटफ़ील्ड काफी बड़ा नहीं था।

— जूल

@ जानोच, 2 ^ 24 = 16777216। 16777271इस प्रकार 25 बिट की आवश्यकता होगी।

— पेसियर

Answer 3

मेरे परीक्षण बताते हैं कि z-index: 2147483647अधिकतम मूल्य है, ओएस एक्स के लिए एफएफ 3.0.1 पर परीक्षण किया गया है। मैंने एक पूर्णांक अतिप्रवाह बग की खोज की: यदि आप टाइप करते हैं z-index: 2147483648(जो 2147483647 + 1 है) तो तत्व अन्य सभी तत्वों के पीछे चला जाता है। कम से कम ब्राउज़र क्रैश नहीं करता है।

और सीखने का सबक यह है कि आपको z-indexसंपत्ति के लिए बहुत बड़े मूल्यों में प्रवेश करने से सावधान रहना चाहिए क्योंकि वे चारों ओर लपेटते हैं।

Comments

क्योंकि यह (2147483647) 32 बिट ऑपरेटिंग सिस्टम पर हस्ताक्षरित पूर्णांक का सबसे बड़ा धनात्मक मान है ...

— Badr Hari

मुझे नहीं लगता कि मान 2147483647 से अधिक होने पर नंबर चारों ओर से लपेट जाएगा ... मुझे लगता है कि यह अधिक संभावना है कि ब्राउज़र इस मान पर किसी भी संख्या को एक स्थिर मान के रूप में

— मानेंगे

हो सकता है कि अपने मूल्य सिर्फ नकारात्मक हो ... उदाहरण -२१४७४८३६४७ के लिए

— Wahyu Fahmy

2147483648 पर जा रहे आधुनिक ब्राउज़रों में अन्य तत्वों के पीछे तत्वों को स्थानांतरित नहीं किया जाता है

— Zach Saucier

Answer 4

जेड-इंडेक्स का न्यूनतम मूल्य 0 है ; अधिकतम मान ब्राउज़र प्रकार पर निर्भर करता है।

Comments

दरअसल, z-index एक ऋणात्मक संख्या हो सकती है। नकारात्मक जेड-इंडेक्स वाले स्थिति वाले तत्वों को पहले एक स्टैकिंग संदर्भ में आदेश दिया जाता है, इसलिए वे अन्य सभी तत्वों के पीछे दिखाई देंगे। डॉक्स भी देखें: w3.org/TR/CSS22/visuren.html#z-index

— magikMaker

कॉपी और पेस्ट करना आसान: 2147483647

— कैंडलजैक

जेड-इंडेक्स एक नकारात्मक संख्या हो सकती है, लेकिन उदाहरण के लिए iOS 11.0.2 के लिए सफारी में इस संपत्ति के साथ एक समस्या है।

— kris_IV

संतोष, आपको ये नंबर कहाँ से मिले? क्या आपने बेहनाम के जवाब से कॉपी किया और IE7 और IE8 जोड़ा?

— CPHPython

Answer 5

यह ब्राउज़र पर निर्भर करता है (हालाँकि सभी ब्राउज़रों का नवीनतम संस्करण 2147483638 पर अधिकतम होना चाहिए), जैसा कि अधिकतम पार होने पर ब्राउज़र की प्रतिक्रिया होती है।

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

Answer 6

यह एक 32 बिट्स पूर्णांक का अधिकतम मूल्य है: 2147483647

डॉक्स भी देखें: https://www.w3.org/TR/CSS22/visuren.html#z-index (नकारात्मक संख्या की अनुमति है)

Answer 7

अनुभव से, मुझे लगता है कि सही अधिकतम z-index2147483638 है।

Comments

लगता है आप गलत हैं। एरिक पोदोकास द्वारा 2009 में किए गए परीक्षणों के अनुसार, अधिकतम z- सूचकांक मूल्य (अतिप्रवाह पर तत्वों को छोड़ने का जोखिम के बिना) 2147483647 है।

— मार्टिन

Answer 8

जेड-इंडेक्स केवल उन तत्वों के लिए काम करता है जो उनके पास हैं position: relative;या position: absolute;लागू होते हैं। यदि यह समस्या नहीं है तो हमें अधिक सहायक होने के लिए एक उदाहरण पृष्ठ देखने की आवश्यकता होगी।

संपादित करें: अच्छे डॉक्टर ने पहले से ही पूरी व्याख्या कर दी है, लेकिन त्वरित संस्करण यह है कि न्यूनतम 0 है क्योंकि यह एक ऋणात्मक संख्या और अधिकतम नहीं हो सकता है - ठीक है, आपको वास्तव में अधिकांश डिज़ाइनों के लिए 10 से ऊपर जाने की आवश्यकता नहीं होगी।

Comments

मैंने "z-index: -1;" का उपयोग किया है एक तत्व को "सिंक" करने से पहले इसे क्लिक नहीं किया जा सकता है। यह शायद एक लोकप्रिय समाधान नहीं है, लेकिन यह काम करता है। : पी

— टाइ।

मुझे पता है कि यह थोड़ा देर से है, लेकिन यह स्थिति के साथ काम करता है: साथ ही तय किया गया।

— TCCV

AFAIK, आप z- इंडेक्स मान के लिए ऋणात्मक पूर्णांक हो सकते हैं।

— d -_- b

मुझे आश्चर्य है कि मैं z-index क्यों निर्दिष्ट करता हूं: 1000, लेकिन ब्राउज़र ने मुझे बताया कि वास्तविक z-index ऑटो है। स्थिति चाल है।

— विल वू

Answer 9

मैंने पाया है कि अक्सर अगर 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-index ने उन्हें स्वतंत्र स्टाॅक में रखा है वे अब उसी स्टाॅक में हैं। और ठीक से z- इंडेक्स करेगा।

इसका एक उपयोगी और काफी मानवीय वर्णन है: http://foohack.com/2007/10/top-5-css-mistakes/  

Comments

जब हम इस विषय पर हैं, तो एक और आम समस्या position: relative;या ऐसा कुछ नहीं है।

— रयान टेलर

दरअसल, मूल पोस्ट को सिर्फ दोबारा पढ़ें। तुम सही हो, यह शायद उसकी समस्या है।

— रयान टेलर

Answer 10

ऊपर एक उपयोगकर्ता कहता है "ठीक है, आपको वास्तव में अधिकांश डिज़ाइनों के लिए 10 से ऊपर जाने की आवश्यकता नहीं होगी।"

आपके प्रोजेक्ट के आधार पर, आपको केवल z-indexes 0-1 या z-indexes 0-10000 की आवश्यकता हो सकती है। आपको अक्सर उच्च अंकों में खेलने की आवश्यकता होगी ... विशेष रूप से यदि आप लाइटबॉक्स दर्शकों के साथ काम कर रहे हैं (9999 मानक प्रतीत होता है और यदि आप अपने z- इंडेक्स को शीर्ष करना चाहते हैं, तो आपको इससे अधिक की आवश्यकता होगी!)

Answer 11

जबकि INT_MAXशायद सबसे सुरक्षित शर्त है, WebKit जाहिरा तौर पर आंतरिक रूप से युगल का उपयोग करता है और इस प्रकार बहुत बड़ी संख्या (एक निश्चित परिशुद्धता के लिए) की अनुमति देता है । LLONG_MAXउदाहरण ठीक काम करता है (कम से कम 64-बिट क्रोमियम और वेबकिटजीटीके में), लेकिन इसे 9223372036854776000 पर गोल किया जाएगा।

(हालांकि आपको ध्यान से विचार करना चाहिए कि क्या आप वास्तव में, वास्तव में इस कई z सूचकांक की आवश्यकता है ...)।