Programming

Z- 색인의 최소값과 최대 값은?

procodes 2020. 2. 13. 00:56
반응형

Z- 색인의 최소값과 최대 값은?


내 HTML 페이지에 div가 있습니다. 일부 조건을 기반 으로이 div를 표시하고 있지만 div는 마우스 커서를 가리키는 HTML 요소 뒤에 표시됩니다.

z-index의 모든 값을 0-999999로 시도했습니다. 왜 이런 일이 발생하는지 말해 줄 수 있습니까?

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를 사용하여 .divClassonclick으로 div를 표시하고 숨 깁니다 <asp:hyperlink>.


┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ 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- 색인'

: 자동 | <정수> | 상속

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

일부 값 유형에는 정수 값 (<정수>로 표시) 또는 실수 값 (<번호>로 표시)이있을 수 있습니다. 실수와 정수는 십진 표기법으로 만 지정됩니다. <정수>는 하나 이상의 숫자 "0"~ ​​"9"로 구성됩니다. <숫자>는 <정수>이거나 0 개 이상의 숫자 다음에 점 (.)과 하나 이상의 숫자가 될 수 있습니다. 부호를 나타 내기 위해 정수와 실수 모두 "-"또는 "+"가 앞에 올 수 있습니다. -0은 0과 같으며 음수가 아닙니다.

정수 또는 실수를 값으로 허용하는 많은 속성은 실제로 값을 특정 범위, 종종 음이 아닌 값으로 제한합니다.

따라서 기본적으로 CSS 표준에는 z-index 값에 대한 제한이 없지만 대부분의 브라우저는 실제로 부호있는 32 비트 값 (−2147483648 ~ +2147483647)으로 제한합니다 (64는 약간 떨어짐). 요즘 32 비트 미만의 것을 사용하는 것은 의미가 없습니다.)


내 테스트에 따르면 z-index: 2147483647OS X 용 FF 3.0.1에서 테스트 한 최대 값입니다. 정수 오버플로 버그를 발견했습니다. 입력하면 z-index: 2147483648(2147483647 + 1) 요소가 다른 모든 요소 뒤에옵니다. 적어도 브라우저는 충돌하지 않습니다.

그리고 배울 점은 z-index속성이 너무 많이 들어가서 값을 너무 많이 입력하지 않도록주의해야한다는 것 입니다.


Z- 색인 의 최소값 0입니다 . 최대 값은 브라우저 유형에 따라 다릅니다.

여기에 이미지 설명을 입력하십시오


최대 값을 초과 할 때 브라우저의 반응과 마찬가지로 브라우저에 따라 다릅니다 (모든 브라우저의 최신 버전은 최대 2147483638이어야 함).

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


경험 z-index이 없으면 올바른 최대 값 은 2147483638입니다.


32 비트 정수의 최대 값 : 2147483647

다음 문서도 참조하십시오 : https://www.w3.org/TR/CSS22/visuren.html#z-index (음수가 허용됨)


Z- 색인은 해당 요소에 적용 position: relative;되거나 position: absolute;적용된 요소에만 작동 합니다. 이것이 문제가되지 않으면 더 도움이되는 예제 페이지가 필요합니다.

편집 : 좋은 의사는 이미 최대한의 설명을했지만 빠른 버전은 최소값은 음수와 최대 값이 될 수 없기 때문에 최소값은 0이라는 것입니다. 대부분의 디자인에서 실제로 10 이상으로 올라갈 필요는 없습니다.


부모 / 형제에 지정된 z- 색인이 없기 때문에 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>

# 1을 z-index 0으로 설정하면 z-index를 사용하는 형제가 독립 스택에 넣은 형제는 이제 동일한 스택에 있습니다. z- 색인이 올바르게 지정됩니다

이것은 유용하고 상당히 인간화 된 설명이 있습니다 : http://foohack.com/2007/10/top-5-css-mistakes/  


위의 사용자는 "음, 대부분의 디자인에서 실제로 10을 넘을 필요는 없습니다."라고 말합니다.

프로젝트에 따라 z- 인덱스 0-1 또는 z- 인덱스 0-10000 만 필요할 수 있습니다. 특히 라이트 박스 뷰어를 사용하는 경우 (9999가 표준 인 것으로 보이며 z- 색인을 위로 표시하려면이 숫자를 초과해야합니다.)


하지만 INT_MAX아마도 가장 안전한 내기이다, 웹킷은 분명히 내부적으로 복식을 사용하여 허용 매우 큰 (특정 정밀도) 숫자를. LLONG_MAX예를 들어 (64 비트 Chromium 및 WebkitGTK에서 이상) 제대로 작동하지만 9223372036854776000으로 반올림됩니다.

(여러분이 정말로 많은지 신중히 고려해야하지만, 이 많은 z 지수가 정말로 필요합니다…).


궁금한 점은 Firebug와 같은 편집기를 사용 z-index하고 브라우저에 큰 숫자를 넣으면 가장 큰 삽입 값을 최대 값으로 바꿉니다.

참고 URL : https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index



반응형