css - 使出现在相对 anchor 标记(img 内部)上方的绝对 div 都可点击

Question

我正在尝试获取一个隐藏的 div，它出现在 anchor 标记上方(悬停时)，两者都可点击。该链接包含一张图片，点击它会打开一个模式框，div 包含社交网络链接/图片。

parent 是<figure> children 按顺序是 <a>与 <img> 的链接内部(relative)，隐藏的 div(absolute)和一个 <figcaption> ( relative ) 这是隐藏的 div 上方的那个，必须保持这种状态，直到它悬停并且 div 从顶部出现。

我想知道为什么 z-index +0 的值不适用于 absolute .在 <figcaption> 后面必须是 -1 或更小容器。其他一些困扰我的小细节:顶部 a/img我的代码看不到聚焦时的轮廓边框(请参阅末尾的 fiddle )。是什么让它如此？两者都有 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 );
}

为什么是absolute div在 figcaption 之上元素如果有 z-index: 2 (比 div 多 1)？

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

所以 div.p-mask在两个 jsfiddles(html 和 css)中完全相同，为什么表现不同？有人看出区别在哪里吗？

Answer 1

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

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).

Elements can overlap for a variety of reasons, for instance relative positioning has nudged it over something else. Negative margin has pulled the element over another. Absolutely positioned elements overlap each other. All sorts of reasons.

如果您有两个 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-index 的更多信息 here