绝对定位元素和CSS转换的问题

时间:2013-02-09 08:26:20

标签: html css css3 css-transitions

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

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

在我看来,好像页面换行以这些元素为中心,然后它们相对于它布局,这在某种程度上会影响转换的渲染,但我完全被卡住了。我已经尝试了所有我能想到的东西,现在正在寻求帮助。另外我应该说我只在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);
}

3 个答案:

答案 0 :(得分:1)

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

已经回答here

答案 1 :(得分:0)

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

使用你的html&amp; css,divs叠加在一起,从 .card 中移除position: absolute;并将其设为float:left。没有看到任何问题,然后还原并尝试将top:left:值添加到div中,我遇到的唯一问题是所有div都在上面,添加了z-index:999 .card:hover ,一切似乎都运行得很好。

尝试发布jsfiddle.net链接,我会尝试再看看它。

答案 2 :(得分:0)

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

我看不出任何问题。