CSS3 过渡以不影响其他元素

Question

是否有可能具有不影响附近元素位置的高度过渡？

这种特殊情况涉及带有 float：left 的div。

演示：http://ashleystewart.me/

我希望悬停过渡位于您可以看到的元素上方。

Answer 1

为容器框提供"相对定位"，为浮出控件详细信息框提供"绝对定位"。由于绝对定位的元素已从布局中删除，因此不会干扰浮点数。

演示：http://dabblet.com/gist/3729269

Answer 2

恐

怕在您遵循的当前布局逻辑中，很难修复。

为什么？因为就像第一行中的floats彼此相邻对齐一样，当上行的框在:hover上展开时，底行中的float也会相对于该框重新定位。

以下是我如何实现您的想法：

• 不要使用 float ing，使用类似 display: inline-block; 的东西。
• 您的语义article包装器在使用 inline-block; 时导致问题。要么摆脱它们(哎呀，可能不是SEO友好的(，要么确保在设计"盒子"时不依赖overflow: hidden;。

对不起，我不能提供更多帮助！

Answer 3

您可以使用position属性而不是使用float属性，您可以执行以下操作：

#idname {
   position:fixed;
   margin-right:100px;
   margin-left:100px;
   margin-top:100px;
   margin-bottom:100px; /* I had written 100px only for example you can adjust it according to your screen */
}
#idname:hover {
   -moz-transtion: /* adjust the setting here for Firefox */;
   -webkit-transition: /* adjust the setting here for chrome and safari */;
   -o-transition: /* adjust the setting here for Opera */;
}

这将使div移动成为可能，并且其位置将固定。

Answer 4

您可以使用在转换上使用过渡。转换将更改元素，而不会影响布局。你会想用transform: scaleY()说你想把某物的高度加倍：

transform: scaleY(2);
-webkit-transform: scaleY(2);
-moz-transform: scaleY(2);
-o-transform: scaleY(2);

Answer 5

将<div>放在正确的位置。保持外部位置：固定，内部保持位置：绝对

或者另一种方法是使外<div>的最大高度固定，内<div>应保持最大变换高度等于外。这将有助于不使其他<div>受到影响交易

或者另一种方式可以是，使用块来显示内容，而不是使用浮动方式

Answer 6

您可以使用

position: absolute而不是position: fixed，这样当您打开Web开发人员工具时，div就不会移动。