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


.absolute{
border:1px solid; 
margin-bottom:30px;  
position:relative; 
}

Buraya dikkat edelim absolute1, absolute2, absolute3, absolute4, absolute5 alanlarımızı kapsayan 

 alanımıza position:relative; değerini belirtmemizin gerekir. Position:relative; değerini belirtmemizin sebebi içinde barındırdığı 

 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 

 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.