Nasıl Yapılır - Yapışkan Görüntü
CSS ile nasıl yapışkan bir görüntü oluşturacağınızı öğrenin.
Yapışkan Görüntü
Not: Bu örnek, Internet Explorer veya Edge 15 ve önceki sürümlerde çalışmaz.
Yapışkan Görüntü
Örnek
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
İle bir öğe position: sticky;
, kullanıcının kaydırma konumuna göre konumlandırılır.
Yapışkan bir öğe , kaydırma konumuna bağlı olarak relative
ve arasında geçiş yapar. fixed
Görünüm alanında belirli bir ofset konumu karşılanana kadar göreli olarak konumlandırılır - ardından yerine "yapışır" (konum:sabit gibi).
Not: Internet Explorer, Edge 15 ve önceki sürümler, yapışkan konumlandırmayı desteklemez. Safari, bir -webkit- öneki gerektirir (aşağıdaki örneğe bakın). Yapışkan konumlandırmanın çalışması için top
, veya öğelerinden en az birini right
de belirtmelisiniz .bottom
left
CSS konumlandırma hakkında daha fazla bilgi edinmek için CSS Konumu eğiticimizi okuyun.
Resimlere nasıl stil uygulanacağı hakkında daha fazla bilgi edinmek için CSS Görselleri eğiticimizi okuyun.