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를 사용하여 .divClass
onclick으로 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: 2147483647
OS 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
'Programming' 카테고리의 다른 글
Visual Studio에서“stdafx.h”는 무엇입니까? (0) | 2020.02.13 |
---|---|
람다 식에서 속성 이름 검색 (0) | 2020.02.13 |
C # 부분 클래스를 사용하는 것이 언제 적절한가요? (0) | 2020.02.13 |
숭고한 텍스트가 탭당 두 칸을 들여 쓰도록하려면 어떻게합니까? (0) | 2020.02.13 |
“현재 중단 점에 도달하지 않습니다. (0) | 2020.02.13 |