我正在制作一个包含许多绝对定位元素的网站。我将它们包含在以页面为中心的“页面包装”中。它是相对定位的，因此包含的元素相对于它进行布局。页面上的某些元素是其他页面的锚点，在 :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);
}