CSS 缩放图像始终位于顶部

Question

我生成了一个简单的 CSS 代码，以便当用户将鼠标悬停在图像上时获得放大的图像。.zoom:hover {  -webkit-transform:scale(1.25); /* Safari and Chrome */  -moz-transform:scale(1.25); /* Firefox */  -ms-transform:scale(1.25); /* IE 9 */  -o-transform:scale(1.25); /* Opera */  transform:scale(1.25);  border: 1px solid;  border-color: #999999;  border-radius: 3px;  box-shadow: 5px 5px #999999;}结果很好，但有时顶部不显示图像，如何防止这种情况发生？我尝试在代码中添加position: relative;和。position: absolute;css<div class="col-lg-9 d-flex flex-column justify-content-center">    <h4 style="padding-top: 25px;"><strong>Vaste filters</strong></h4>    <blockquote><p class="description" style="font-size: 14px;">    Er kunnen voor modules ook vaste filers in de code worden verwerkt, om bijvoorbeeld alleen projecten te zien welke op dit moment lopen of die om een andere actie vragen.    </p>    <img src="img/portfolio/torza/007.png" class="img-fluid zoom" alt="Torza">    </blockquote></div><div class="col-lg-3 mt-auto mb-auto">    <img src="img/portfolio/torza/006.png" class="img-fluid zoom" alt="Torza"></div>

Answer 1

尝试添加z-index属性

.zoom:hover {

  transform:scale(1.25);

  border: 1px solid;

  border-color: #999999;

  border-radius: 3px;

  box-shadow: 5px 5px #999999;

  /* To bring top */

  position: relative;

  z-index: 9999;

 }

但请确保所有内容都按 z-index 组织，甚至包括下拉菜单。因为z-index行为就像等级制度。

比如说，如果添加z-index: 0;内容就会在z-index: 1;内容后面。