使出现在相对锚标记（内部的img）上方的绝对div都可点击

Question

我正在尝试获取一个隐藏的 div，它显示在锚标记上方（悬停时），两者均可点击。该链接包含一个图像，单击它会打开一个模式框，该 div 具有社交网络链接/图像。

父级是<figure>，子级依次是<a>链接，内部有<img>（relative）、隐藏的div（absolute）和<figcaption>（@ 987654329@) 是隐藏 div 上方的那个，并且必须保持这种状态，直到它悬停并且 div 从顶部出现。

我想知道为什么 z-index 的 +0 值不适用于 absolute。在<figcaption> 容器后面必须为-1 或更小。其他一些困扰我的小细节：顶部的a/img 轮廓边框在我的代码中不可见（见最后的小提琴）。是什么让它如此？两者都有display: block 和position: relative。

我使用的是html5标签，所以：

<figure class="team-grid twenny">
    <a href="#" data-toggle="modal" data-target="#t1_desc">
        <img src="http://via.placeholder.com/205x264" />
    </a>
    <div class="p-mask">
        <ul class="social-icons">
            <li><a href="#" class="icon-button twitter"><i class="icon-twitter"></i><span></span></a></li>
            <li><a href="#" class="icon-button google"><i class="icon-google"></i><span></span></a></li>
            <li><a href="#" class="icon-button v"><i class="icon-v"></i><span></span></a></li>
            <li><a href="#" class="icon-button pinterest"><i class="pinterest"></i><span></span></a></li>
        </ul>
    </div>
    <figcaption>
        <h4>Natasha César</h4>
        <p><?= $lang->getW('t1_title') ?></p>
    </figcaption>
</figure>

社交网络链接的宽度和高度应为 30 像素。该设计来自一个 w3layout 模板（摆弄原始代码：https://jsfiddle.net/bfb1L7g1/ 这是我想用简单的 html5 标记实现的目标）

这是css代码：

.team-grid { position: relative }
.team figure {
    position: relative;
    overflow: hidden;
    display: inline-block
}
.team figure a {
    position: relative;
    display: block;
}
.team figure img {
    position: relative;
    display: block;
    max-width: 100%;
    height: auto;
}
.team figcaption {
    background-color: white;
    padding: 1em;
    border: 4px double #D0D0D0;
    text-align: center;
    z-index: 2;
}
.team .p-mask {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    background: rgba(0, 0, 0, 0.72);
    bottom: 30%;
    padding: 1em 0 .6em;
    width: 87%;
    overflow: hidden;
    z-index: 1;
    -webkit-transform: translate3d( 0px, 100%, 0px );
       -moz-transform: translate3d( 0px, 100%, 0px );
        -ms-transform: translate3d( 0px, 100%, 0px );
         -o-transform: translate3d( 0px, 100%, 0px );
            transform: translate3d( 0px, 100%, 0px );
    -webkit-transition: all .5s ease 0s;
       -moz-transition: all .5s ease 0s;
            transition: all .5s ease 0s;
}
.team figure:hover .p-mask {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d( 0px, 0px, 0px );
       -moz-transform: translate3d( 0px, 0px, 0px );
        -ms-transform: translate3d( 0px, 0px, 0px );
         -o-transform: translate3d( 0px, 0px, 0px );
            transform: translate3d( 0px, 0px, 0px );
}

如果figcaption 元素有z-index: 2（比div 多1），为什么absolute div 在上面？

我用剩下的代码做了一个 jsfiddle：https://jsfiddle.net/cm3k6rot/1/

所以div.p-mask 在两个 jsfiddles（html 和 css）中完全相同，为什么表现不同？有谁看出有什么不同吗？

Answer 1

CSS 中position 的不同值会影响它的垂直对齐方式。

CSS中的z-index属性控制垂直堆叠顺序 重叠的元素。如，哪一个看起来好像是物理的 离你更近。 z-index 仅影响具有位置的元素 静态以外的值（默认值）。

元素可能由于多种原因重叠，例如相对 定位已经将它推到了别的东西上。负边距有 将元素拉到另一个上。绝对定位元素 相互重叠。各种原因。

如果你有两个 div，一个是绝对定位的，一个不是绝对定位的，position: static; div 上的 z-index 不会改变任何东西。

div {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

.div1 {
  background-color: red;
  margin-top: 10px;
  margin-left: 10px;
}
.div2 {
  background-color: blue;
  z-index: 2147483647;
}

<div class="div1" style="position: absolute;"></div>
<div class="div2"></div>

但如果两个 div 都绝对定位，那么即使是非常小的 z-index 值也会将其置于另一个 div 之上：

div {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

.div1 {
  background-color: red;
  position: absolute;
  margin-top: 10px;
  margin-left: 10px;
}
.div2 {
  background-color: blue;
  position: absolute;
  z-index: 2;
}

<div class="div1"></div>
<div class="div2"></div>

你可以阅读更多关于z-indexhere的信息