CSS Ders-12 Pozisyonlandırma Kullanımı (Position)
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Ders-12 Pozisyonlandırma Kullanımı (Position)

profil
cArleone
BEĞEN(2)
BEĞENME(0)
GÖRÜNTÜLENME(3492)
RAPOR ET
Bu dersimizde css positionları anlatacam.Tüm siteyi positionlarla kurmayın diyerek bir uyarıyla başlayayım :).Şimdi positionun 3 parametresi vardır onlardan başlayalım.

1-relative
2-absolute
3-fixed

Positionun genel işleyiş mantığını anlatayım. Burası önemlidir.Positionla bir objeyi pozisyonlandırırken bu sitenin sol üst köşesini referans alır.Bu standarttır.Bir html nesnesine relative değerini verirsek onun altındaki objelerde pozisyon verirken relative verdiğimiz objenin sol üstünü referans alır.

Şimdi kodlarımıza başlayalım.

1-Relative
Bir objeye bunu verdiğimiz zaman bu obje altındakilere pozisyon başlangıcının bu objenin sol üstü olduğunu belirtiyoruz.
position:relative;


2-Absolute
Bir objeyi Pozisyon vereceksek bunu yazmamız gerek.Aksi taktirde kodlarımız çalışmaz.Absolute sayesinde istediğimiz yere koyabiliriz.Position absolute verdiğimizde altında yine position absolute kullanırsak başlangıcını burdan alır.Bir nevi position:relative işlevide görür.
position:absolute;

3-Fixed
Bir objeyi bir yere sabitlemek için kullanırız.Yani fixed değerini verip pozisyonlandırırsak.O objeyi oraya çakmış oluruz.Yani scroll inse bile bu orda kalır.
position:fixed;


NOT:Positionla yerleştirdiğimiz objeler sayfada bir ağırlıkları yoktur.Yani positionla yerleştirdiğimiz objenin ardındaki bir objeyi ittirmez üst üste gelebilir.

Yerleştirme
Position verdikten sonra objenin pozisyonunu vermek için kodlarımız şunlar:
left = sol
right = sağ
top = üst
bottom = alt

left:50px;
right:-50px;
top:100px;
bottom:75px;


Genel Örnek:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<style type="text/css">
.ana{width:500px;height:300px;background:red;margin:auto;position:relative;margin-top:100px;}
.pos{width:100px;height:30px;position:absolute;left:100px;top:-50px;background:blue;}
.serpos{width:100px;height:50px;background:yellow;position:fixed;top:50px;left:50px;}
</style>
</head>
<body>

<div class="serpos"></div>

<div class="ana">
<div class="pos"></div>
</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol