CSS İle Pozisyon Konumlandırma (10. Ders Position Absolute Kullanımı) | BilgeBank
Cumartesi , Ekim 21 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / CSS Dersleri / CSS İle Pozisyon Konumlandırma (10. Ders Position Absolute Kullanımı)

CSS İle Pozisyon Konumlandırma (10. Ders Position Absolute Kullanımı)

Css ile alanlarımızda düzenlemeler yaparken position özelliğini kullanırız position özelliğinin 4 farklı değeri vardır; Static, Relative, Absolute, Fixed değerlerini alarak çeşitli konumlamalar elde edebiliriz. Position Kullanımı iyi kavrayabilmeniz için 4 ayrı ders halinde anlatmaya çalışacağız.

Position: Absolute; Kullanımı

Position:Absolute; özelliği Relative özelliği gibi kullanıldığında alanlar için bağımsızlık özelliği verir, ancak absolute değeri Relative değeri gibi bulunduğu sırada işlemez. Alanının 1. sırasında konumlanarak 1. sıradaki alanın üstünde konumlanır. Örnekteki çalışmayı iyice inceleyerek absolute özelliğinin temel mantığını kavrayalım.

Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz

Buraya dikkat edelim absolute1, absolute2, absolute3, absolute4, absolute5 alanlarımızı kapsayan <div class=”absolute”> alanımıza position:relative; değerini belirtmemizin gerekir. Position:relative; değerini belirtmemizin sebebi içinde barındırdığı <div class=”absolute4″> alanına  position: absolute; değeri verecek olmamızdır.

Eğer absolute alanımıza position:relative; değerini belirtmezsek html alanındaki alanlarımızın sırasına göre <div id=”tumalan”> alanımızı  1. sıradaki alan sayarak tumalan içinde sıfırlama yapar ve absolute4 alanımızı sol üst köşede konumlandırır. Absolute alanımızdaki position:relative; komutunu kaldırdığımızı da etkinin nasıl olduğuna bakabilirsiniz.

.absolute4{ background:gray;float:left;width:200px;height:25px;margin:2px;

position: absolute; Komutumuz ile alanımızı bağımsız hala getirdik absolute4 alanımız absolute1 alanımızın hemen üstünde konumlandı.

top:20px; Komutumuz ile absolute1 alanımızın üstüne gelen absolute4 alanını ayırmak için yukarıdan 10px boşlukla alanımızı konumlandırdık.

}

Hakkında BilgeBank

İlgili Makale

html menü

CSS İle Açılır Menü Yapımı (12. Ders Açılır Menü)

Css ile açılır menü yapımını adım adım resimli bir şekilde nasıl yapıldığını anlatmaya çalışacağım olayın  mantığını …

Bir Cevap Yazın