z-index 相关问题

我正在尝试调整某些元素的堆叠顺序；这是一个 SSCCE。鉴于这个 HTML 片段： Lorem ipsum dolor。我正在尝试调整某些元素的堆叠顺序；这是一个SSCCE。给出这个 HTML 片段： <div id="block1"> <div>Lorem ipsum dolor.</div> <div id="widget"> <div>Widgety goodness!</div> </div> </div> <div id="block2"> <div>Lorem ipsum dolor.</div> </div> <div id="block3"> <div>Lorem ipsum dolor.</div> </div> 我正在尝试在 #widget 之上显示 #block2；使用以下 CSS，您会发现在不更改 #widget 在节点树中的位置的情况下会出现问题。 #block1, #block2, #block3 { position: relative; min-height: 50px; width: 100%; } #block1, #block3 { background-color: #abc; color: #123; z-index: 1; } #block2 { background-color: #def; color: #456; z-index: 2; } #widget { background-color: #f00; position: absolute; z-index: 999; left: 200px; top: 40px; } 正如您在小提琴中看到的，#widget 与 #block2 部分重叠；这是非常有道理的，因为父级 #block1 在兄弟姐妹中的堆叠顺序较低。显而易见的答案是：使#widget成为#block2的子级，但不幸的是这不是这里的解决方案。此外，无法修改 #blockN 元素的相对 z-index 值；块 1 和块 3 必须小于 2。（我的意思是计算值可能不同，但 #block2 将始终大于其兄弟姐妹）。这样做的原因是box-shadow分层。是否有任何合理的（阅读：跨浏览器，IE7+）方法从其堆叠上下文中删除#widget，同时保留其位置，坐标位置，尺寸等？使用 fixed 定位可以根据需要将其删除，但它也获得了被固定的所有视觉属性（这使其成为非解决方案）我认为这可能已经以迂回的方式得到了回答，但我没有找到。另外，抱歉；看来我可能在我的第一篇文章中错过了一些无害但关键的细节。我想我现在已经涵盖了所有这些。您的规则并没有真正应用于您希望它们应用的元素。您需要在要定位的元素上显式设置 z 索引，在您的情况下，该元素是 block2 的 div 子元素。通过简单地修改第一个选择器： #block1, #block2 , #block3 { 到 #block1, #block2 div, #block3 { 您的堆叠顺序已更正。您的 z-index 规则应用于父级，而子级继续使用默认的 auto。在您的情况下，通过设置 #block2 div 上的位置，您可以允许您的小部件位于 block2 子 div 的顶部。 jsFiddle 示例我想你不需要改变#widget的位置。在我看来，答案就在于你的问题本身。看看这个编辑CSS： #block1{ background-color: #abc; color: #123; z-index:3; } #block3 { background-color: #abc; color: #123; z-index:1; } 一个可行的解决方案是使用 div 的 position 堆叠顺序，而不是在此处使用 z-index。因此不会形成不需要的堆叠上下文。块 1 和 3 获取默认值 position: static 块 2 得到 position: relative（超过 1 和 2）并且只有小部件才会获得 z 索引，这会将其移动到所有部件之上！ http://jsfiddle.net/4eENM/

html css position z-index

回答 3 投票 0

如何在 Google Maps API v3 中设置标记的 z 索引

任何人都可以解释使用 Google Maps API（版本 3）设置标记的 z-index 的确切语法吗？

javascript google-maps-api-3 maps z-index google-maps-markers

回答 3 投票 0

::before 伪元素未显示在表单下方，尽管 z-index -1 设置

我遇到一个问题，使用 ::before 创建的元素没有出现在表单下方。即使将 z-index 设置为 -1 后，它也不起作用。我该如何解决这个问题？ .form::之前{ 内容：“”...

z-index pseudo-element

回答 1 投票 0

堆叠元素的 Z 索引问题

我有一个相当复杂的页面，其中有一个使用定位（z-index：302）的标题和一个固定侧边栏，其中包含一些弹出菜单和叠加层。问题是固定侧边栏需要