绝对定位元素和 CSS 过渡的问题答案

【问题标题】：Issue with Absolutely Positioned Element and CSS Transitions绝对定位元素和 CSS 过渡的问题
【发布时间】：2013-01-25 00:39:40
【问题描述】：

我正在制作一个包含许多绝对定位元素的网站。我将它们包含在以页面为中心的“页面包装”中。它是相对定位的，因此包含的元素相对于它进行布局。页面上的某些元素是其他页面的锚点，在 :hover 时，这些元素会转换到另一种状态，使用缩放变换和增加的框阴影使它们看起来像是从页面上抬起。

但是，当我将鼠标悬停在一个这样的元素上时，标记中所有跟随它的元素都会表现出奇怪的行为，例如在过渡期间稍微移动位置。如果它们不包含在页面换行中，或者如果页面换行不再设置为相对定位（在这种情况下从布局角度来看基本上是相同的），则不会发生此问题。

在我看来，页面换行使这些元素居中，然后它们相对于它进行布局这一事实在某种程度上影响了过渡的呈现，但我完全被卡住了。我已经尝试了我能想到的一切，现在正在寻求帮助。另外我应该说我只在 Webkit 浏览器上测试过这个问题，所以这个问题可能不会出现在其他浏览器上。

这是一些精简的代码：

HTML：

<body>
    <div id="page-wrap">

        <a class="card" href="text.html"><div class="vert"><div class="card-content">
            Here is<br/>some text
        </div></div></a>

        <a class="card" href="somemore.html"><div class="vert"><div class="card-content">
            Here is<br/>some more text
        </div></div></a>

        <a class="card" href="evenmore.html"><div class="vert"><div class="card-content">
            Here is<br/>even more text
        </div></div></a>

    </div>
</body>

CSS：

body {
    background: hsl(60, 80%, 90%);
}

#page-wrap {
    margin: 0 auto;
    position: relative;
    width: 800px;
}

.card {
    background: hsl(80, 0%, 97%);
    box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
    display: table;
    height: 150px;
    margin: 0px;
    position: absolute;
    width: 300px;
    -webkit-transition: all 0.2s linear;
}

.vert {
    display: table-cell;
    margin 0px;
    padding: 0px;
    vertical-align: middle;
    width: 100%;
}

.card-content {
    font: 40px 'Annie Use Your Telescope', cursive;
    margin: 0px;
    text-align: center;
    width: 100%;
}

a.card {
    background: hsl(120, 90%, 35%);
    color: hsl(60, 80%, 90%);
    text-decoration: none;
    text-shadow: -2px 2px hsl(60, 80%, 35%);
    z-index: 3;
}

a:hover {
    box-shadow: 0 0 40px 15px hsla(0,0%,0%,.3);
    -webkit-transform: scale(1.2);
}

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

将-webkit-backface-visibility: hidden; 添加到.card。

已经回复here。

【讨论】：

你是一个救生员。谢谢你找到这个。我到处寻找解决方案。

【解决方案2】：

我在CodePen 上“按原样”复制了您的代码。

我看不出有什么问题。

【讨论】：

在对上述答案的评论中发布了 JSFiddle 链接。请参阅评论以获取更新。
看看你的 JsFiddle。对我来说没问题。结果显示出来了，一切正常。
小提琴没有显示问题，因为结果窗口太小了。您需要通过将 html 和 css 复制到文件中来在整个页面中查看它。我在评论中说明了这一点。

【解决方案3】：

无法重现您似乎遇到的问题。也许一个 jsfiddle.net 的例子会很好？

当使用您的 html 和 css 时，div 彼此堆叠，从 .card 中删除 position: absolute; 并将它们设为 float:left。在那里没有看到任何问题，然后恢复并尝试将 top: 和 left: 值添加到 div 中，我遇到的唯一问题是上面的所有 div 都在上面添加了 z-index:999 到 。 card:hover 一切似乎都很好。

尝试发布一个 jsfiddle.net 链接，我会尝试再看看它。

【讨论】：

JSFiddle here。它不会显示在结果窗口中，但是如果您将 HTML 复制到文件中并将 CSS 放入 <style> 块或它自己的文件中并在 Chrome 中打开它，您应该会看到问题。 Fiddle 中的代码直接反映了锚点的布局方式。