照片库 z-index 问题答案

【问题标题】：Photo Gallery z-index issue照片库 z-index 问题
【发布时间】：2015-10-28 17:18:23
【问题描述】：

我正在尝试修改 http://tympanus.net/Development/ScatteredPolaroidsGallery/ 的 z-index。我所指的演示在显示的第三个/最后一个示例中。

当宝丽来翻转时，我无法在 chrome 或 Safari 中选择文本，但在 firefox 中可以。

Chrome 和 Firefox

我只需要一种能够在 chrome/safari 中选择文本的方法。这样我就可以添加当前隐藏在 z-index 后面的超链接和号召性用语按钮。

有问题的 div 是 'photostack-back'

HTML

<section id="photostack-1" class="photostack photostack-start">
<div>
    <!-- Polaroid with backside -->
    <figure>
        <a href="http://goo.gl/fhwlSP" class="photostack-img">
            <img src="img/2.jpg" alt="img02"/>
        </a>
        <figcaption>
            <h2 class="photostack-title">Happy Days</h2>
            <!-- optional backside -->
            <div class="photostack-back">
                <p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
            </div>
        </figcaption>
    </figure>
   </div>
</section

CSS

.photostack-back {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
font-family: "Give You Glory", cursive;
color: #a7a0a2;
padding: 50px 40px;
text-align: left;
font-size: 22px;
line-height: 1.25;
z-index: 1;
}

这里是教程Scattered Polaroids Gallery

【问题讨论】：

同时发布 CSS 怎么样？
谢谢@Hoshts，我已经更新了我的代码
我可以看到问题。移动 Safari 在选择文本时遇到了同样的问题。我现在在手机上，所以无法查看。当我再次使用电脑时会回来查看。

标签： css google-chrome z-index photo-gallery

【解决方案1】：

我发现这不是 z-index 问题，而是背面可见性问题。

我使用veinjs在photostack.js中注入以下代码

vein.inject('figure', {'backface-visibility' : 'visible !important'});

和css

figcaption {
backface-visibility: hidden;
}

【讨论】：