CSS3 Geçiş, diğer öğeleri etkilemeyecek mi?

Question

Yakındaki elemanların konumunu etkilemeyen yükseklik geçişlerine sahip olmak mümkün mü? Bu özel durum, float ile divları içerir: sol.

Demo: http://ashleystewart.me/

ben dolaşırım görebilirsiniz elemanın üstüne gitmek için vurgulu geçişi istiyorum.

Answer 1

Konteyner kutularını verin Rölatif konumlandırma ve dışarı aktarma ayrıntıları kutusu Mutlak konumlandırma. Mutlak konumlandırılmış elemanlar yerleşimden çıkarıldığından, yüzer noktalara müdahale etmeyecektir.

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

Answer 2

Şu anki mizanpaj mantığında takip etmeniz çok zor olacaktır.

Neden? Çünkü, ilk satırdaki floats, birbirinin yanına hizalanmış olduğu için, üst satırdaki bir kutu :hover'da genişlediğinde, alt satırdaki float s, bir tanesine göre yeniden konumlandırılacaktır. İşte

Ben senin fikrin elde etme konusunda gitmek gibi olacaktır:

• display: inline-block; gibi bir şey kullanmak, float ING kullanmayın.
• Anlamsal article sarıcılarınız, inline-block; kullanırken sorunlara neden oluyor. Onlardan kurtulun (oops, SEO dostu olmayabilir), ya da "kutularını" şekillendirirken overflow: hidden;'a güvenmediğinizden emin olun.

Üzgünüm Daha fazla yardım edemedim!

Answer 3

yerine float özelliğini kullanmanın position özelliğini kullanabilir, aşağıdakileri yapabilirsiniz:

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

Bu div yer değiştirmesine olanak sağlayacak ve yeri sabittir edilecektir.

Answer 4

Dönüştürme ile bir geçiş kullanarak kullanabilirsiniz. Dönüş, öğeyi düzeni etkilemeden değiştirecektir.

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

Answer 5

Sen position: absolute yerine position: fixed div açtığınızda web geliştirici araçları hareket etmez bu şekilde kullanabilirsiniz: Sen transform: scaleY() birşeyin yüksekliğinin iki istedik demek kullanmak istersiniz.

Answer 6

<div>'u uygun bir konuma yerleştirin. eşit olan maksimum dönüşüm yüksekliğinin tutulmalıdır mutlak

ya da başka bir şekilde, dış <div> ve iç <div> sabit maksimum yüksekliği yapmak için olan: pozisyonda dışında olanlar edin: pozisyonda sabit ve iç olanlar dış olanı.Bu, kullanım bloklar yerine