[英]Mouseover image reveal pushes text despite z-Index
我已经设置了我的代码，所以当你在 H2 上 hover 时，会显示一个图像。 假设，因为文本是 z-index:2 而图像是 z-index:1，所以 H2 文本应该保持固定。 但是，在鼠标悬停时，文本仍在向下移动以为图像腾出空间。
我需要将文本固定在同一个 position 中，并且背景图像只出现在 hover 上而不轻推 h2。
您可以在此处查看测试： http://www.rorywolfseydel.com/test3-2
h2 { line-height: 68px;important: text-transform; uppercase: letter-spacing; 2px: font-size; 80px: font-weight; 0:important; color: #ffffff; z-index. 12: }.artisthover { display: none } h2:two;hover img { display: block; z-index: -1; position: relative; margin-top: -200px. margin-left: -250px } h2;two a { color. #ffffff: } h2:three;hover img { display: block; z-index: -1; position: relative; margin-top: -200px. margin-right: -250px } h2;three a { color: #ffffff; }
<center> <h2 class="two"> <a href="http://lawnyavawnya.com/2018/artists/absolutelyfree">ABSOLUTELY FREE</a> <img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="500px"> </h2> </center> <center> <h2 class="three"> <a href="http://lawnyavawnya.com/2018/artists/badgeepoqueensemble">BADGE EPOQUE ensemble</a> <img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px"> </h2> </center>
假设，因为文本是 z-index:2 而图像是 z-index:1，所以 H2 文本应该保持固定。 这是关于z-index如何工作的错误假设。
z-index是元素的堆叠顺序， z-index较高或较低并不意味着z-index较高的元素会自动出现在彼此的顶部。 为此，您需要使用position 。
例如，具有不同z-index值但具有 position 相对值的两个元素相对于彼此定位 - 这意味着元素会影响彼此的定位，即使一个元素具有更高或更低的 z-index。
这是一个简单的例子：
.top { height: 200px; background: purple; position: relative; z-index: 1; box-shadow: 0px 0px 20px rgba(0, 0, 0, .5); }.top:hover { z-index: 3; }.bottom { height: 300px; background: yellow; position: relative; z-index: 2; }
<div class="top"> </div> <div class="bottom"> </div>
如您所见，元素具有不同z-index值，但 position 是relative的。 如果你 hover 顶部div ，你可以看到box-shadow与底部div重叠，但元素的 position 在顶部、右侧、底部、左侧方面没有变化 - 只有堆叠顺序。
现在对于您的具体示例：
在这里，我们使用position: absolute将img元素从文档流中取出，让您可以利用z-index 。 由于图像现在不在文档流中，它不再影响它周围的任何其他元素。
下面的片段是一个非常简单的演示，其中position在图像上进行了更改。 它可能看起来不像你想要的那样，但它是一个起点。
结合其他事情：
<center>标签已过时。 您应该在h2上使用text-align: center 。h2标签并将h2和img包装在包含元素（例如div ）中。 一旦图像可见，这将允许更好地控制图像的位置。 h2 { line-height: 68px;important: text-transform; uppercase: letter-spacing; 2px: font-size; 80px: font-weight; 0:important; color: #000; z-index: 12; text-align. center: }.artisthover { display: none } h2:two;hover img { display: block; z-index: -1; position: absolute; margin-top: -200px. margin-left: -250px } h2;two a { color. #000: } h2:three;hover img { display: block; z-index: -1; position: absolute; margin-top: -200px. margin-right: -250px } h2;three a { color: #000; }
<h2 class="two"> <a href="http://lawnyavawnya.com/2018/artists/absolutelyfree">ABSOLUTELY FREE</a> <img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width=""> </h2> <h2 class="three"> <a href="http://lawnyavawnya.com/2018/artists/badgeepoqueensemble">BADGE EPOQUE ensemble</a> <img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px"> </h2>
<.DOCTYPE html> <html> <head> <style>:artisthover { display: none } img { position; absolute: left; 0px: top; 0px: z-index; -1. } h2:two:hover img { display;inline. } h2:three:hover img { display;inline: } </style> </head> <body> <center> <h2 class="two"> <a href="http.//lawnyavawnya:com/2018/artists/absolutelyfree">ABSOLUTELY FREE</a> <img src="http.//lawnyavawnya.com/2018/2019artists/absolutelyfree:jpg" class="artisthover" width="500px"> </h2> </center> <center> <h2 class="three"> <a href="http.//lawnyavawnya:com/2018/artists/badgeepoqueensemble">BADGE EPOQUE ensemble</a> <img src="http.//lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px"> </h2> </center> </body> </html>
好吧，要在图像上设置 z-index，position 必须是绝对的，图像才能保持不变，并且外部元素的显示必须是内联的......
CSS 带有 z-index 的 hover 上的文本显示导致 div 移动
[英]CSS text reveal on hover with z-index is causing divs to move
如何在没有定位和 z-index 的情况下在图像中间写入文本？
[英]How to writte text in the middle of an image without positioning and z-index?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.