CSS3 Przejście do nie wpłynie na inne elementy?

Question

Czy można zmieniać wysokość, które nie wpływają na położenie pobliskich elementów?

Ten szczególny przypadek dotyczy elementów div z float: left.

Demo: http://ashleystewart.me/

Chciałbym przejście najechania pójść na górze elementu można zobaczyć poruszając się.

Answer 1

Podaj pola kontenera Względne położenie i pole szczegółów wyprowadzania Bezwzględne pozycjonowanie. Ponieważ elementy z pozycją Absolute są usuwane z układu, nie będą kolidować z elementami pływającymi.

demo: http://dabblet.com/gist/3729269

Answer 2

Obawiam się, że w obecnej logice układu, którą śledzisz, byłoby to bardzo trudne do naprawienia.

Dlaczego? Ponieważ podobnie jak twój floats w pierwszym rzędzie są wyrównane obok siebie, gdy pole w górnym rzędzie jest rozszerzony na :hover, float s w dolnym wierszu będzie również przesunięcie względem tego również.

Oto jak bym go o osiągnięciu swój pomysł:

• Nie używaj float ing, użyć czegoś jak display: inline-block;.
• Opakowania semantyczne article powodują problemy podczas korzystania z inline-block;. Albo się ich pozbyć (ups, może nie być SEO friendly), albo upewnij się, że nie polegasz na overflow: hidden; podczas stylizowania swoich "pudełek".

Przykro mi, ale nie mogę pomóc!

Answer 3

Można użyć position własność zamiast korzystania float właściwość, można wykonać następujące czynności:

#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 */; 
} 

ten umożliwi przenoszenie div i jego pozycja zostanie ustalona.

Answer 4

Można użyć przejścia dla transformacji za pomocą. Transform zmieni element bez wpływu na układ. co chcesz używać transform: scaleY() powiedzieć chciał podwoić wysokość coś:

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

Answer 5

Można użyć position: absolute zamiast position: fixed, tędy div nie będzie można ruszyć przy narzędzi open web developer.

Answer 6

Umieść <div> we właściwym położeniu. Przechowywać poza te w position: fixed i wewnętrzną te w position: absolute

Albo w drugą stronę jest do maksymalnej wysokości ustalonej dla zewnętrznej <div> i wewnętrzną <div> powinna być maksymalna wysokość transformacji równa zewnętrzna.Pomoże to w nie co drugi <div> uzyskiwanie wpływu na transakcję

czy inny sposób, może być wykorzystanie bloki do wyświetlania treści, raczej za pomocą pływaka sposób