z-index 相关问题

z-index表示元素出现的z平面上的顺序。堆栈顺序较高的元素始终位于堆栈顺序较低的另一个元素的前面。它在大多数GUI框架（Web和桌面）中都可用。

为什么我无法让贴纸标题始终位于内容之上？

我正在 WordPress 上使用名为 Frejya 的主题构建一个网站。当您滚动经过主标题然后向上滚动时，会出现一个粘性标题。它应该出现在上面...

html css wordpress z-index

回答 0 投票 0

是否有一种优雅的方式来编写 cypress 测试来查找所有子元素的 z-index 是否位于特定范围内（例如：200-299）？

给定一个 div，是否有一种优雅的方法来查找该 div 的所有 z-index 值是否在特定范围内（例如：200-299）。因此，对于给定的示例代码，我需要测试 div 是否具有类名

html testing cypress z-index

回答 0 投票 0

滚动时无法使菜单始终在顶部

我有一个固定在左上角的菜单 whit z-index：999999；但是，当向下滚动特定的 div 时，我会松开顶部，即使它的 z-index 较低，也无法单击菜单选项。格#

css wordpress z-index

回答 0 投票 0

z-index 和 translate 3d 在 chrome 和 safari 中的工作方式不同

我遇到浏览器兼容问题，发现它是由 Google chrome 和 Safari 处理 z-index 并以不同方式翻译 3D 引起的。我在这里做一个最小的例子：我遇到浏览器兼容问题，发现它是由 Google chrome 和 Safari 处理 z-index 并以不同方式转换 3D 引起的。我在这里做一个最小的例子： <div> <div style="background-color: blue; height: 100px; width: 100px; position: absolute; transform: translate3d(10px, 10px, 10px)"></div> <div style="background-color: red; height: 100px; width: 100px; position: relative; z-index: 1"></div> </div> 这个简短的 html，在 Safari 和 Google Chrome 中显示不同。我可以知道哪个是期望的行为吗？我应该如何正确地同时使用 z-index 和 transform？我尝试了不同的浏览器并做了一个最小的例子。 Safari 也将 translate3d 属性作为浏览器中的一个图层工作，并且它具有这种不同的显示方法，因此如果您将元素与 z-index 和其他元素与 translateZ，translateZ 或 translate3d 将在 z-index 元素上工作所以，为了避免 safari 出现问题，我建议您使用 translateY 和 translateX 方法，如下面的评论所示这里有更多关于 Safari 的信息：https://bugs.webkit.org/show_bug.cgi?id=61824 例子： .box { height: 100px; width: 100px; } .blue { background-color: blue; position: absolute; /** this works in safari **/ transform: translateY(10px) translateX(10px); transform: translate3d(10px, 10px, 10px); } .red { background-color: red; position: absolute; /** this desn't work in safari */ /** transform: translate3d(0, 0, 9px); */ /** need this to work with safari */ /** transform: translate3d(0, 0, 11px); */ z-index: 1; } <div> <div class="box blue"></div> <div class="box red"></div> </div>

html css css-transitions z-index

回答 1 投票 0

如何让我的 HoverCard 出现在最上面

我使用 Mantine React Table 来呈现表格，在表格的单元格中我有一个徽章，当我悬停在那个徽章上时我想显示我的 HoverCard .. 我有一个 Hover 的显示问题......

css reactjs position z-index mantine

回答 0 投票 0

在 GUI 中生成 2 个单击选择列表框。一个不工作。遇到错误

我有两个列表框，每个列表框都引用一个单独的文本文件。当我在 classList 框中单击时它起作用（光标选择填充到文本框）。如果我先点击 speciesList 框，什么都没有

listbox cursor z-index

回答 0 投票 0

为什么启用了 Drog JavaScript 的元素的 z-index 锁定在 10

我正在为我的个人网站制作一个小纸娃娃解剖游戏，但我有一个问题。我遇到了 z-index 无法正常运行的问题。原来，有人指出了原因……

javascript html css drag-and-drop z-index

回答 1 投票 0

如何防止工具提示在表格中创建垂直滚动条？

我创建了一个表格，其中嵌入了工具提示。在表格底部附近，工具提示悬停的长度会在表格中创建一个永久的垂直滚动条以适合工具提示。但是我想要

css tooltip overflow z-index css-tables

回答 0 投票 0

Android 浏览器的位置：修复和 z-index 问题

让我分享一个例子以更好地说明： jsFiddle：http://jsfiddle.net/yhurak3e/ 或者你可以在这里阅读： HTML: box1 box2 ... 让我分享一个例子以更好地说明： jsFiddle： http://jsfiddle.net/yhurak3e/ 或者您可以在这里阅读： HTML： <div id="box1">box1</div> <div id="box2">box2 <div> <div id="box4">box4</div> </div> </div> <div id="box3">box3</div> CSS： #box1 { width: 100%; height: 40px; position: fixed; top: 0; left: 0; background: green; z-index: 5; } #box2 { height: 300px; position: relative; background: yellow; } #box3 { height: 100%; width: 100%; left: 0; top: 0; position: fixed; background: black; opacity: .8; z-index: 10; } #box4 { left: 20px; top: 20px; right: 20px; bottom: 20px; position: fixed; background: blue; z-index: 11; } 在所有其他浏览器中，#box4（蓝色的）出现在其他元素的顶部，除非我将 z-index 属性赋予其中一个锚点。这是预期的结果。在 Android 的默认浏览器（在 4.1 上测试）中，#box4 位于#box1 和#box3 之下。有人知道解决它的 CSS 解决方法吗？谢谢！来自 this 线程的类似问题的解决方法是应用 -webkit-transform:translateZ(0); 到#box4. 您必须在 parent 元素或 #box4 的元素上应用上述解决方法，同时将 -webkit-transform:translateZ(0); 应用于 #box4，如下所示： #box1 { width: 100%; height: 40px; position: fixed; top: 0; left: 0; background: green; z-index: 5; } #box2 { height: 300px; position: relative; background: yellow; } #box3 { height: 100%; width: 100%; left: 0; top: 0; position: fixed; background: black; opacity: .8; z-index: 10; } #box4 { left: 20px; top: 20px; right: 20px; bottom: 20px; position: fixed; background: blue; z-index: 11; } #box1, #box2 { /*parent*/ -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ backface-visibility: hidden; } #box4 { /*child*/ -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */ transform: translateZ(0); } <div id="box1">box1</div> <div id="box2"> box2 <div> <div id="box4">box4</div> </div> </div> <div id="box3">box3</div>

css css-position z-index android-browser

回答 2 投票 0

用 PyVista 绘制一个点

我想在 PyVista 中绘制一个网格，以及一个代表其重心的点。我希望该点始终可见，即使它位于网格后面。我怎样才能做到这一点？我试图找到对...

z-index mesh pyvista

回答 0 投票 0

查找列表中整数的索引

我有这个列表： L= ['p', 2, 3, 1,'T','F', 0,'L','C','H', 1,'C',0] 我该怎么做才能获得只有整数的所有位置，例如：整数位置是： 1个 2个 3个 6个 10 12 我尝试转换...

python list integer z-index

回答 4 投票 0

在更改位置时更改 div 的 zIndex

所有的 css 和 html 都正常工作，但是每当我尝试更改函数中的 zIndex 时，无论我尝试哪种方式，它都会阻止函数启动。（父cont的zIndex ...