CSS3他の要素に影響を及ぼさない遷移？

Question

近くの要素の位置に影響を与えない高さ遷移を持つことは可能ですか？

この特殊なケースでは、float：leftのdivが含まれます。

デモ： http://ashleystewart.me/

私はホバー遷移があなたの周りに移動見ることができる要素の上に行きたいと思います。

Answer 1

コンテナボックスに相対配置とフライアウト詳細ボックス絶対配置。絶対配置された要素はレイアウトから削除されるので、浮動小数点を妨害することはありません。

デモ：http://dabblet.com/gist/3729269

Answer 2

私は、現在のレイアウトロジックではあなたが追いかけていることを恐れています。修正するのは非常に難しいでしょう。

なぜですか？最初の行のfloatsが隣り合って並んでいるため、上の行のボックスが:hoverに展開されている場合、一番下の行のfloatは相対的に移動します。ここで

は、私はあなたのアイデアを実現するに行くか方法は次のとおりです。

• display: inline-block;のようなものを使用し、float INGを使用しないでください。
• inline-block;を使用すると、意味があるarticleラッパーが問題を引き起こしています。どちらかを取り除く（おっとり、SEOにはやらないかもしれない）、またはあなたの「ボックス」をスタイリングするときにoverflow: hidden;に頼らないようにしてください。

申し訳ありません、私はさらに助けになることはできませんでした。

Answer 3

あなたが代わりにfloatプロパティを使用してのpositionプロパティを使用することができ、あなたは、次の操作を行うことができます：

#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はレイアウトに影響を与えずに要素を変更します。あなたはtransform: scaleY()を使用したいと思うあなたが何かの高さを倍増したいと言う：

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

Answer 5

あなたは、あなたがウェブ開発ツールを開いたときにdiv要素が移動しません。この方法をposition: absolute代わりにposition: fixedを使用することができます。

Answer 6

<div>を適切な位置に配置します。に等しい最大変換の高さを維持しなければならない絶対

または他の方法外側<div>と内側<div>固定最大の高さを作ることである。 位置外側ものキープ：位置に固定され、内側のものを外側のもの。それはあなたが最小限に投稿できるフロート方法