CSS3過渡到不影響其他元素？

Question

是否有可能使高度過渡不影響附近元素的位置？

這個特殊情況涉及div：float：left。

演示： http://ashleystewart.me/

我想懸停過渡去上，你可以看到走動元素的頂部。

Answer 1

給出容器框相對定位和飛出細節框絕對定位。由於絕對定位元素從佈局中移除，它不會干擾浮動。

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

Answer 2

恐怕在當前你所關注的佈局邏輯中，修復起來很難。

爲什麼？因爲像第一排中的floats彼此相鄰排列，當上排中的框擴展爲:hover時，底行中的float也將相對於該排重新定位。

下面我將如何去實現自己的想法：

• 不要使用float ING，使用類似display: inline-block;。
• 您的語義article包裝在使用inline-block;時會引發問題。要麼擺脫他們（哎呀，可能不是搜索引擎優化），或者確定你在設計「盒子」時不依賴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

可以使用position: absolute代替position: fixed，這樣的DIV不會移動，當你打開網頁開發工具。

Answer 6

將<div>置於正確的位置。 保持在位置外界的：固定和內那些位置：絕對

或者其他方式是使固定外<div>和內<div>最大高度應保持最大變換高度等於外一個。它將在沒有提出其他<div>獲取有關交易

或者其他方式可以影響幫助，使用的塊來顯示內容，而使用浮動方法