当前位置： 文江博客话题详情

z-index 的最小值和最大值？

发布于 2024-07-13 02:03:35 字数 952 浏览 9 评论 0原文

我的 HTML 页面中有一个 div。 我根据某些条件显示此 div，但该 div 显示在我将鼠标光标指向的 HTML 元素后面。

我已经尝试了从 0 - 999999 的所有 z-index 值。谁能告诉我为什么会发生这种情况？

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。

原文

I have a div in my HTML page. I am showing this div based on some condition, but the div is displaying behind the HTML element where I pointed the mouse cursor.

I have tried all values for z-index from 0 - 999999. Can anyone tell me why this is happening?

Is there any minimum or maximum value of Z-INDEX property of 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>

I am showing and hiding the div with .divClass onclick via the <asp:hyperlink> using jQuery.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（13）

嘦怹 2024-07-20 02:03:36

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

“z 索引”

值：自动 | <整数> | 继承

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

某些值类型可能有整数
值（用表示）或
实数值（表示为
<数字>）。 实数和
整数以十进制指定
仅符号。 <整数>
由一位或多位数字“0”组成
“9”。 一个<数字> 可以是
，或者它可以是零或
更多数字后跟一个点 (.)
后跟一位或多位数字。 两个都
整数和实数可以是
前面加“-”或“+”表示
标志。 -0 相当于 0 并且是
不是负数。

请注意，许多属性允许
整数或实数作为值
实际上将值限制为某些
范围，通常为非负值。

所以基本上 CSS 标准中的 z-index 值没有限制，但我猜大多数浏览器在实践中将其限制为带符号的 32 位值（−2147483648 到 +2147483647）（64 有点偏离顶部，而且它如今使用小于 32 位的任何东西都没有意义）

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

'z-index'

Value: auto | <integer> | inherit

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

Some value types may have integer
values (denoted by <integer>) or
real number values (denoted by
<number>). Real numbers and
integers are specified in decimal
notation only. An <integer>
consists of one or more digits "0" to
"9". A <number> can either be an
<integer>, or it can be zero or
more digits followed by a dot (.)
followed by one or more digits. Both
integers and real numbers may be
preceded by a "-" or "+" to indicate
the sign. -0 is equivalent to 0 and is
not a negative number.

Note that many properties that allow
an integer or real number as a value
actually restrict the value to some
range, often to a non-negative value.

So basically there are no limitations for z-index value in the CSS standard, but I guess most browsers limit it to signed 32-bit values (−2147483648 to +2147483647) in practice (64 would be a little off the top, and it doesn't make sense to use anything less than 32 bits these days)

回复 原文
回眸一笑 2024-07-20 02:03:36

我的测试显示 z-index: 2147483647 是最大值，在 OS X 的 FF 3.0.1 上测试。
我发现了一个整数溢出错误：如果您输入 z-index: 2147483648 （即 2147483647 + 1），该元素就会排在所有其他元素后面。 至少浏览器不会崩溃。

我们要吸取的教训是，您应该注意不要为 z-index 属性输入太大的值，因为它们会环绕。

My tests show that z-index: 2147483647 is the maximum value, tested on FF 3.0.1 for OS X.
I discovered a integer overflow bug: if you type z-index: 2147483648 (which is 2147483647 + 1) the element just goes behind all other elements. At least the browser doesn't crash.

And the lesson to learn is that you should beware of entering too large values for the z-index property because they wrap around.

回复 原文
枕梦 2024-07-20 02:03:36

根据经验，我认为正确的最大 z-index 是 2147483647。

Out of experience, I think the correct maximum z-index is 2147483647.

回复 原文
撩起发的微风 2024-07-20 02:03:36

它是 32 位整数的最大值：2147483647

另请参阅文档：https ://www.w3.org/TR/CSS22/visuren.html#z-index
（允许负数）

It's the maximum value of a 32 bits integer: 2147483647

Also see the docs: https://www.w3.org/TR/CSS22/visuren.html#z-index
(Negative numbers are allowed)

回复 原文
当梦初醒 2024-07-20 02:03:36

结论 最大 z-index 值为 2,147,483,647，超过此值将转换为 2,147,483,647

‌浏览器最大超过最大
Chrome >= 292,147,483,6472,147,483,647
Opera >= 92,147,483,6472,147,483,647
IE & >= 62,147,483,6472,147,483,647
Safari >= 42,147,483,6472,147,483,647
Safari = 316,777,27116,777,271
Firefox >= 42,147,483,6472,147,483,647
Firefox = 32,147,483,6470
Firefox = 22,147,483,647Bug：标记隐藏了

BrowserStack 中测试的所有值。

Conclusion Maximum z-index value is 2,147,483,647 and more than this convert to 2,147,483,647

‌BrowserMaximumMore Than Maximum
Chrome >= 292,147,483,6472,147,483,647
Opera >= 92,147,483,6472,147,483,647
IE >= 62,147,483,6472,147,483,647
Safari >= 42,147,483,6472,147,483,647
Safari = 316,777,27116,777,271
Firefox >= 42,147,483,6472,147,483,647
Firefox = 32,147,483,6470
Firefox = 22,147,483,647Bug: tag hidden

All Values tested in BrowserStack.

回复 原文
夏夜暖风 2024-07-20 02:03:36

这取决于浏览器（尽管所有浏览器的最新版本的最大值应为 2147483638），以及超出最大值时浏览器的反应。

It depends on the browser (although the latest version of all browsers should max out at 2147483638), as does the browser's reaction when the maximum is exceeded.

回复 原文
鲸落 2024-07-20 02:03:36

Z-Index 仅适用于应用了 position:relative; 或 position:absolute; 的元素。 如果这不是问题，我们需要查看示例页面以获取更多帮助。

编辑：好医生已经给出了最完整的解释，但快速版本是最小值为 0，因为它不能是负数，而最大值 - 好吧，对于大多数设计来说，你永远不需要超过 10。

Z-Index only works for elements that have position: relative; or position: absolute; applied to them. If that's not the problem we'll need to see an example page to be more helpful.

EDIT: The good doctor has already put the fullest explanation but the quick version is that the minimum is 0 because it can't be a negative number and the maximum - well, you'll never really need to go above 10 for most designs.

回复 原文
爱殇璃 2024-07-20 02:03:36

我发现，如果 z-index 不起作用，通常是因为它的父级/兄弟级没有指定的 z-index。

因此，如果您有：

<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-错误/
 

I have found that often if z-index isn't working its because its parent/siblings don't have a specified z-index.

So if you have:

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

item #3, or even #4, may be contesting #2 for the click/hover space, though if you set #1 to z-index 0, the siblings who's z-index put them in independant stacks now are in the same stack and will z-index properly.

This has a helpful and fairly humanized description: http://foohack.com/2007/10/top-5-css-mistakes/
 

回复 原文
递刀给你 2024-07-20 02:03:36

上面的一位用户说：“好吧，对于大多数设计来说，你永远不需要超过 10。”

根据您的项目，您可能只需要 z 索引 0-1 或 z 索引 0-10000。 您经常需要玩更高的数字......特别是如果您使用灯箱查看器（9999 似乎是标准，如果您想超越他们的 z-index，您需要超过这个数字！）

A user above says "well, you'll never really need to go above 10 for most designs."

Depending on your project, you may only need z-indexes 0-1, or z-indexes 0-10000. You'll often need to play in the higher digits...especially if you are working with lightbox viewers (9999 seems to be the standard and if you want to top their z-index, you'll need to exceed that!)

回复 原文
坠似风落 2024-07-20 02:03:36

有两种超级简单的方法可以使用 calc() 编写 z-index 的最大值和最小值。

最大值

要写入最大值，请执行以下操作：

.my-element {
    z-index: calc(9e999);
}

最小值

要写入最小值，请执行以下操作：

.my-element {
    z-index: calc(-9e999);
}

calc() 浏览器兼容性（ 值支持）表

浏览器最小值版本
火狐49
Safari7
IE9
Opera18
Chrome31
Edge12

There are two super easy ways to write maximal and minimal value for z-index using calc().

Maximal Value

To write maximal value, do this:

.my-element {
    z-index: calc(9e999);
}

Minimal Value

To write minimal value, do this:

.my-element {
    z-index: calc(-9e999);
}

calc() Browser compatibility (<number> value support) table

BrowserMinimal Version
Firefox49
Safari7
IE9
Opera18
Chrome31
Edge12
回复 原文
最终幸福 2024-07-20 02:03:36

更现代和正确的方法是使用它：

.lowest {
  z-index: calc(-infinity);
}

.highest {
  z-index: calc(infinity);
}

所有主要浏览器都支持此功能： https:// caniuse.com/mdn-css_types_calc-constant_infinity

A more modern and proper approach would be to use this:

.lowest {
  z-index: calc(-infinity);
}

.highest {
  z-index: calc(infinity);
}

This is supported in all major browsers: https://caniuse.com/mdn-css_types_calc-constant_infinity

回复 原文
浅唱ヾ落雨殇 2024-07-20 02:03:36

虽然 INT_MAX 可能是最安全的选择，但 WebKit 显然在内部使用了双精度数，因此允许非常大的数字（达到一定的精度）。 LLONG_MAX 例如工作正常（至少在 64 位 Chromium 和 WebkitGTK 中），但将四舍五入为 9223372036854776000。

（尽管您应该仔细考虑您是否真的、真的需要这个许多 z 索引...）。

While INT_MAX is probably the safest bet, WebKit apparently uses doubles internally and thus allows very large numbers (to a certain precision). LLONG_MAX e.g. works fine (at least in 64-Bit Chromium and WebkitGTK), but will be rounded to 9223372036854776000.

(Although you should consider carefully whether you really, really need this many z indices…).

回复 原文
多彩岁月 2024-07-20 02:03:36

不要使用最大/最小值，只需尝试：

1. 组织 HTML 标签顺序

 主题BadGood
描述使用 z-index 组织堆叠顺序使用 HTML 标签的原始顺序 组织堆叠顺序
屏幕截图 a b
在线演示https://jsbin.com/zanijac/edit?html,输出https:// /jsbin.com/gakeqix/edit?html,output

2. 创建新的堆栈上下文以隔离 z-index

主题BadGood
描述使用 z-index: max || min 覆盖其他标签使用固定的 z-index: 0 隔离堆叠上下文屏幕
截图bad good
在线演示https://jsbin.com/lavofef/edit?html,outputhttps://jsbin.com/qakegup/edit?html,output

你不需要 z-index

z-索引是危险的：

  • 它具有传染性：如果一个标签获得z-index，更多标签将被感染以覆盖旧标签。
  • 它将膨胀：如果一个标签获得 z-index: 1;，更多标签将不得不使用 z-index: 2;, z-index: 3 ; ... z 索引：最大 || 分钟；，繁荣！

使用 z 索引：max || min; 特别危险。 如果一个标签获得了 z-index: max ，它将很难被其他标签覆盖，整个项目将逐渐失控。

Do NOT use max/min value, simply try:

1. Organize HTML tag order

 TopicBadGood
DescUse z-index to organize stacking orderUse original order of HTML tags to organize stacking order
Screenshot a b
Online DEMOhttps://jsbin.com/zanijac/edit?html,outputhttps://jsbin.com/gakeqix/edit?html,output

2. Create new The stacking context to isolate z-index

  TopicBadGood
DescUse z-index: max || min to override the other tagUse fixed z-index: 0 to isolate The stacking context
Screenshot bad good
Online DEMOhttps://jsbin.com/lavofef/edit?html,outputhttps://jsbin.com/qakegup/edit?html,output

You don't need z-index

z-index is dangerous:

  • It is infectious: If one tag gets z-index, more tags will be infected in order to override the old one.
  • It will inflate: If one tag gets z-index: 1;, more tags will have to use z-index: 2;, z-index: 3; ... z-index: max || min;, Boom!.

Use z-index: max || min; is especially dangerous. If one tag gets z-index: max , it will be hard to override by others, the whole project will out of control gradually.

回复 原文
~没有更多了~

关于作者

白馒头

暂无简介

文章
评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

梦里南柯

文章 0 评论 0

不将就、

文章 0 评论 0

alipaysp_ZRaVhH1Dn

文章 0 评论 0

青衫儰鉨ミ守葔

文章 0 评论 0

故事未完

文章 0 评论 0

梦晓ヶ微光ヅ倾城

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文