Question

是否可以使高度过渡不影响附近元素的位置？

这个特殊情况涉及带浮点数的div：left。

演示： http://ashleystewart.me/

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

Answer 1

给容器盒相对定位和飞出细节框绝对定位。由于绝对定位元素从布局中移除，因此它不会干扰浮动。

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

Answer 2

我担心在您关注的当前布局逻辑中，修复起来非常困难。

为什么呢？因为第一行中的floats与第一行中的:hover相邻，所以当在float上展开上一行中的框时，底行中的float将相对重新定位那一个。

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

请勿使用display: inline-block;，使用article。
使用inline-block;时，您的语义overflow: hidden;包装器会导致问题。要么摆脱它们（哎呀，可能不是SEO友好的），或者确保你在设置“盒子”时不依赖{{1}}。

抱歉，我无法提供更多帮助！

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>在交易中受到影响

或者另一种方式是，使用块来显示内容，而不是使用float方式

Answer 6

您可以使用position: absolute代替position: fixed，这样当您打开Web开发人员工具时div就不会移动。

CSS3过渡到不影响其他元素？

6 个答案: