CSS İle Pozisyon Konumlandırma (10. Ders Position Absolute Kullanımı) – BilgeBank
Anasayfa / DERSLER / Web Tasarım Dersleri / HTML - 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


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

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

CSS3 Dersleri 4 box-shadow Kutuları Gölgelendirme

CSS3 ile birlikte gelen ve kutuya gölge verme için kullanılan box-shadow özelliği ve kullanımı ile ilgili bilgi vermeye çalışacağım. Hemen …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi:
%d blogcu bunu beğendi: