z-index 相关问题

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

如何获得图形叠加文本？

我想要一个像附加在文本顶部的图形。不确定最好的方法是通过 CSS 还是图像？我尝试过使用 z-index 但我不确定什么是最好的方法...

html css z-index

回答 1 投票 0

z-index 不适用于在文本上堆叠框元素

我试图让一些文本出现在“人工”加载屏幕之后。我尝试使用 z-index 将加载屏幕堆叠在文本之上，因此在它淡出后您可以看到文本...

html css z-index

回答 1 投票 0

Chrome 中悬停时 Z 索引闪烁

我正在尝试使用以下代码创建一个悬停按钮，它在除 Chrome 之外的所有浏览器中都工作得相对不错：我正在尝试使用以下代码创建一个悬停按钮，它在除 Chrome 之外的所有浏览器中都工作得相对不错： <div id="blur" class="et_pb_module et-waypoint et_pb_image et_pb_animation_off et_pb_image_0 et_always_center_on_mobile et-animated"> <a href="http://vina.typesetdesign.com/wines/reserva/reserva-sauvignon-blanc/"> <img alt="" src="http://vina.typesetdesign.com/wp-content/uploads/2015/11/2015_11_17Vina_Echeverria_Reserva_Sauvignon_Blanc_V1.png"> </a> </div> #blur img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } #blur img:hover { opacity: .4; z-index: 1; } #blur a:hover:before { background-color: #6d8e3b; color: #fff; content: "Learn More"; display: block; font-size: 12px; margin-left: auto; margin-right: auto; opacity: .9 !important; padding: 18px; position: relative; top: 20em; width: 70px; z-index: 2; margin-top: -3em; } 出于某种原因，Chrome 不会让你将鼠标悬停在按钮上，否则按钮就会出现故障并闪烁得非常厉害。有没有一种简单的方法可以解决这个问题，而无需添加单独的按钮？实时页面：http://vina.typesetdesign.com/wines/varietal/ 小提琴：https://jsfiddle.net/35txpy8v/ 它闪烁是因为当您将鼠标悬停在元素上方时元素会移动。元素移动的原因是伪元素的定位。为了解决这个问题，我建议绝对将伪元素relative定位到父元素。这样做时，伪元素的位置不会对父元素产生任何影响。更新示例 #blur img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; position: relative; } #blur img:hover { opacity: .4; z-index: 1; } #blur a:hover:before { content: "Learn More"; background-color: #6d8e3b; position: absolute; top: 50%; margin-top: -50px; color: #fff; font-size: 12px; opacity: .9; padding: 18px; width: 70px; z-index: 2; } 还有另一种方法。 /* For the parent element */ #parent_element{ position: relative; } /* For the img element that you would like to change on hover */ /* keep the default behavior in this rule, note that z-index is removed */ #img{ opacity: .4; position: absolute; } /* on hover, we will just change the opacity to the desired value, note that we will remove z-index here as well */ #img:hover{ opacity: .9; } 希望这有帮助。

html css google-chrome z-index

回答 2 投票 0

显示全屏元素以外的元素（HTML5全屏API）

当我“全屏”一个元素（比如说一个div）时，我无法显示任何其他元素（在全屏模式下）。为什么会发生这种情况？我怎样才能做到这一点？相关：有没有...

html css z-index fullscreen

回答 2 投票 0

我在转换期间遇到 z-index 的“深度”问题

我希望单击的框在转换过程中位于最上面。我尝试了一些方法但无法弄清楚。这是简短（最小化）的代码形式。我删除了失败的尝试，例如循环等，以实现我的目标。

z-index depth

回答 1 投票 0

当地图全屏时，如何强制 Sweet Alert 2 在 Google 地图上触发？

我有一个使用 Google 地图的应用程序。我正在使用 Sweet Alert 2 进行 js 确认。只要 Google 地图不处于全屏模式，我就不会遇到触发 Sweet Alert 对话框的问题。