Eksi margin’li değerler bize görsel olarak avantaj sağlar, kodlamamıza yardımcı olur örneğin esnek yapılı sayfaları düzenlememizde ve bir elemanın çizgileri dışına taşırma işlemlerinde.

Eksi margin kullanımı bir hile değildir, CSS’in desteklediği normal bir değerdir.

Eksi margin bir çok yerde kullanıyoruz. Ancak biraz bilinçsiz kullanıyoruz. Ben burada çizgileri belirleyip ona göre hareket etmeyi düşündüm ve bu yazı ortaya çıktı. Eksi marginleri yakından tanıyalım.

Eksi Margin’i iki yerde uygularız.

• Sabit konumlandırılmış elemanlarda
• Float uygulanmış elemanlarda

1- Sabit Elemanlar ve Eksi Margin

1.1. Ard Arda Statik Elemanlar

Herhangi bir konumlandırma ataması yapılmayan tüm elemanlar sabit konumlandırılmıştır.

#kutu1 {
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9
}

#kutu2 {
    width: 200px;
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

<div id="kutu1"></div>
<div id="kutu2"></div>

Örnke kodu görmek için tıklayınız.

Normal akış içindeki iki kutu bir birini takip eder. Biz burada birinci kutuya eksi margin atarsak örneğin alttan -20px gibi.

Alttaki kutuyu kendi üzerine doğru 20px çekecektir.

#kutu1 {
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
    margin-bottom:-20px
}

#kutu2 {
    width: 200px;
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

Örnke kodu görmek için tıklayınız.

Eğer ikinci kutuya yukarıdan eksi margin verirsek

#kutu1 {
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}

#kutu2 {
    width: 200px;
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin-top:-20px
}

Örnke kodu görmek için tıklayınız.

Aynı görüntüyü alırız. Burada bu örneği vermemin amacı, eksi değer üst ve soldan verilirse eleman kendini yukarı veya sola çekecektir. Ancak elemana sağ ve alt eksi değeri verildiğinde kendi yerinden oynamazken ilişkili elemanı kendine doğru çekecektir. Yani üst/sol eksi değerlerde kendi hareket ederken, alt/sağ eksi değerlerde diğer elemanları kendine çekiyor.

1.2. Başlıklar ve içerikler Arasındaki mesafeyi Ayarlamak İçin Eksi Margin kullanmak

Başka bir örnek yapalım. Genelde sitelerin içeriklerini girerken başlık ve içerik şeklinde gireriz. Başlıklar için h1, h2, h3, h4, h5, h6 kullanırız. Bu bize arama motorları içinde avantaj sağlar. 

Normal bir içerik ve başlık kullanımına örnek verelim.

<p>Integer sagittis ... elementum. </p>
<h1>Donec id ultricies mi.</h1>
<p>Lorem ipsum ... eros.</p>

Görünüm aşağıdaki gibi olacaktır

Genel kullanımda başlık ile içerik arasındaki boşluk, başlık ile üst elemanlarda ile olandan daha azdır. Biz bunu sağlamak için h1′e margin-bottom:0 değeri versek de yeterli gelmez. Paragrafın(p) üst margin değeri aradaki mesafeyi açık gösterecektir. Bu durumu engellemek için başlıktan sonra gelen paragraflara bir sınıf atayıp bu paragrafların margin-top değerini düşürmeliyiz veya sıfırlamalıyız.

Bir başka çözüm yolu ise ki bu daha kolaydır ve genelde tercih edilir. Başlık etiketinin alt margin değerine eksi değer vererek paragraf yaklaştırılır. 

h1{
    margin-bottom:-20px
}

1.3. Statik elemanlarda bir başka durumda kutuların iç içe olma durumunda vardır.

#kutu1 {
    width:200px;
    height: 130px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -20px
}

<div id="kutu1">
    <div id="kutu2"></div>
</div>

İçteki kutuya sağdan ve soldan eksi değerler verdiğimizde dış kutunu genişliğini otomatik olarak alan içerideki kutu sağ ve soldan verilen eksi kenar dışı boşluk değerleri kadar dışa taşacaktır.

Örnke kodu görmek için tıklayınız.

Ancak burada farklı tarayıcılarda farklı sorunlarımız ortaya çıkacaktır. ie6 da her iki yana taşan kısımlar gözükmezken, ie7′de sadece sağ kısım görünmemektedir.

ie7′de yukarıdaki gibi görünüyor.

ie6′da ise yukarıdaki gibi görünmektedir.

Bu durumu düzeltmek için düzeltme kodu yazmalıyız. ie7 için min-height:0 tanımı yeterlidir.

#kutu1 {
    width:200px;
    height: 130px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -20px;
    min-height:0
}

ie6 için ise daha farklı bir kod yazmalıyız.

#kutu1 {
    width:200px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -20px;
}
* html #kutu2{
    position:relative;
    height:1px
}

Örnke kodu görmek için tıklayınız.

Bu kodlama sayesinde tüm tarayıcılarda aynı sonucu elde ederiz. Bu örnekten şu sonucuda çıkarabiliriz; genişliği verilmeyen elemanlarda eksi margin eleman genişliğini arttırır, bir bakıma padding görevi görür.

2- Eksi Margin ve Float

Float uygulanmış iki elemanı düşünelim.

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

<div id="kutu1">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id ultricies mi.
</div>
<div id="kutu2">
	Etiam vel arcu nisl. Sed pharetra gravida diam sed mattis.
</div>

Birinci kutuya sağ eksi margin verdiğimizde

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
    margin-right:-50px
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

Örnke kodu görmek için tıklayınız.

Birinci kutu ikinci kutuyu kendine doğru çekecektir. Birinci kutu genişliği ve konumunda herhangi bir değişiklik olmayacaktır.

Farklı durumlarda farklı sonuçlar çıkacaktır. Örneğin,

Birinci float:left ikinci kutu float:right değeri verdiğimizde iki kutu arasında herhangi bir eksi değer etki etmiyor.
Her ikisine float:right tanımladığımızda ise, soldan eksi margin değeri yukarıdaki etkiyi yapıyor.

Peki bu bilgi bizim ne işimize yaracak derseniz. http://www.alistapart.com/articles/negativemargins/ örnekteki gibi esnek yapılı bir sayfa planında sabit yapılı bir sağ veya sol alanlar oluşturmak istediğimizde yarar.

Örneğin %100 genişlikteki bir içerik alanımızı sağ yanına 200px lik bir sağ kolon eklemek istersek, yukarıdaki kodu devam ettirmemiz yeterli olacaktır.

#kutu1 {
    float:left;
    width: 100%;
    height: 100px;
    background-color:#e5ecf9;
    margin-right:-200px
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    background-color:#ffb4bf
}

<div id="kutu1">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id ultricies mi.</p>
</div>
<div id="kutu2">
	<p>Etiam vel arcu nisl. Sed pharetra gravida diam sed mattis.</p>
</div>

%100 içeriği sağ kolonun altında kalıyor. Bunu engellemek için içeriğindeki paragrafa sağ margin değeri atamalıyız.

#kutu1 p{
    margin-right:220px
}

Normalde 200px yeterli olacaktı ancak içerik ile sağ kolon arasına 20px lik bir mesafe koyarak birbirine yapışmasınıda engellemiş olduk.

Sağ ve sol kolon diye bir ayrım yapmak içinde soldaki kolonun ardalan rengini kaldırıp içindeki paragrafa vererek bu sorunu çözebiliriz.

#kutu1 {
    float:left;
    width: 100%;
    margin-right:-200px
}
#kutu1 p{
    margin:0 220px 0 0;
    height: 100px;
    background-color:#e5ecf9;
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    background-color:#ffb4bf
}

Örnke kodu görmek için tıklayınız.

Float uygulanmış iç içe elemanlara eksi margin uygulamak

Yukarıda yan yana elemanlardaki durumu gösterdik peki iç içe elemanlarda eksi margin kullanımda nasıl sonuçlar çıkacaktır.

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    float:right;
    width: 50px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
}

  <div id="kutu1">
  <div id="kutu2">Donec id ultricies mi.</div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>

Örnke kodu görmek için tıklayınız.

Birinci kutu içerisinde sağa hizalanmış ikinci kutuyu sağa doğru birinci kutu dışarısına çıkararak bir çok uygulamada işimizie yaracaktır.

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    float:right;
    width: 80px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -50px 0 0
}
* html #kutu2{
    position:relative;
}

Örnke kodu görmek için tıklayınız.

Bir başka uygulama şeklide

Bir içerik ve başlığı normal şekilde normal akış içerisinde iken

#kutu1 {
    float:left;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
    padding:0 20px
}
#kutu1 h2{
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
}

<div id="kutu1">
    <h2>Donec id ultricies mi.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor vehicula nisl, et tincidunt sapien venenatis quis. .. felis.</p>
</div>

Örnke kodu görmek için tıklayınız.

Ancak buradaki başlığı kutu dışına alarak farklı bir görünüm elde edebiliriz.

#kutu1 h2{
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin-top:-20px
}

Örnke kodu görmek için tıklayınız.

ve tabi ie 6 için

* html #kutu1 h2{
	position:relative; height:1px
}

Eksi Margin Uygulamaları

• Konumlandırma(positioning) kullanılan elementlerin negatif margin ile ortalanması
• CSS ile gölge vermek

Ayrıca

Eksi margin Kullanarak çoklu kolon oluşturmak adlı güzel bir makale var.

Sonuç

Sonuç olarak eksi margin bir çok uygulamamızda kullanacağımız bir özellik. Genelde farklılıkları ile ön plana çıkan bir özelliktir. Ben burada eksi margin’i tanıttım ve genel bilinen uygulamalarını yaptım ve bir kaçına link verdim. Buradaki bilgiler ışığında daha bir çok uygulamamızda eksi margin’i kullanmaya devam edeceğiz.

Kaynaklar

• http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
• http://www.brunildo.org/test/NegMOutH.html
• http://csscreator.com/node/1703 (ie sorun düzeltme)
• http://www.communitymx.com/abstract.cfm?cid=B0029 (bilgi)
• http://www.alistapart.com/articles/negativemargins/ (Uygulama)
• http://www.search-this.com/2007/08/01/the-positive-side-of-negative-margins/ (ayrıntılı bilgi)
• http://www.bennadel.com/blog/1174-Negative-CSS-Margins-Are-Not-Cool.htm (karşı çıkış)
• http://haslayout.net/css/negmargin (hata bilgisi)
• http://csscreator.com/node/28664 (küçük bilgi)
• http://www.simplebits.com/notebook/2005/05/23/negative.html (negatif margin kullanılcak bir örnek)
• http://www.severnsolutions.co.uk/twblog/archive/2004/07/01/cssnegativemarginsalgebra (negatif margin ile sayfa yapısı oluşturma)
• http://haslayout.net/css/Negative-Margin-Bug (negatif margin sorunları)

z-index tüm elementlere uygulanamaz sadece konumlandırma değeri atanmış elementlere uygulanır. Bunun anlamı eğer bir elementi aynı z-ekseni üzerinde üste veya alt sıraya atmak istiyorsanız ilk olarak konumlandırma değeri atamalısınız.

z-index değeri dokümanımızdaki elementlerin istiflenme sıralarını belirler. z-index elementleri z-ekseninde nerede duracağınız belirler, üstte veya altta. z-indeks değeri küçük olan elementler altta büyük olan elementler ise üstte görünecektir. Sitenizi kodlarken birçok yerde z-index ihtiyaç duymayız çünkü normal sayfa akışında elementler yanyana durduğu için böyle bir özelliğe ihtiyaç yoktur, ne zamanki elementlere konumlandırma değeri tanımladığımızda elementler bir biri üzerine bindiğinde z-index değerine ihtiyaç duyarız. z-index mutlak, göreceli ve sabit konumlandırma atandığı veya elemente eksi değer verilerek konumu değiştirildiğinde uygulanır.

Yapısı: z-index: <deger>
Aldığı Değerler: <sayısal değer > | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: postion uygulanan elementlere
Kalıtsallık: Yok

Konumlandırma değeri relative, absolute ve fixed uygulanmış katmanların görünürlüğünü z-index ile ayarlayabiliriz.

div{
    position:absolute;
    width:150px;
    height:150px;
}
div.bir {
    background: #FEB3BE;
    border:2px solid #CC8B94;
    top: 0;
    left: 0;
}
div.iki {
    background: #E5ECF9;
    border:2px solid #BCCCEB;
    top: 10px;
    left: 10px;
}

Yukarıda örnekte görüldüğü gibi katmanlar üst üste sıralanmıştır. Birbirinden 10px üst ve 10px soldan mesafe bırakılmıştır. Üstte kalan katman alttakileri gizlemiştir. Tüm katmanların z-index değeri atanmamıştır bu nedenle başlangıç değeri olan z-index:auto değerini almışlardır.

<body>
    <div class='kapsul'>
        <div class='bir'></div>
        <div class='iki'></div>
    </div>
</body>

z-index değeri otomatik olduğu için her katman html’deki sırasına göre yerleşmiştir. İlk başta yazılmış olanlar altta sonrakiler üstte olacak şekilde sıralanmıştır.

Eğer katmanları istediğimiz sıra ile göstermek istiyor isek her katmana sırasına göre sayısal değer atamalıyız. Yüksek değer alan katmanlar üstte düşük değer alan katmanlar ise altta kalacaktır. Buna göre istediğimiz görüntüyü elde etmek için z-index değerleri vermeliyiz.

Yukarıda yaptığımız örnekte alttaki kırmızı katmanı üste çıkarmak için z-index değerini 2 versek. Mavi katmanın z-index değerini 1 verirsek katman görünümünü tersine dönecektir.

div{
    position:absolute;
    width:150px;
    height:150px;
}
div.bir {
    background: #FEB3BE;
    border:2px solid #CC8B94;
    top: 0;
    left: 0;
    z-index:2
}
div.iki {
    background: #E5ECF9;
    border:2px solid #BCCCEB;
    top: 10px;
    left: 10px;
    z-index:1
}

İçiçe girmiş katmanlarda z-index davranışları farklıdır. İçiçe geçmiş katmanlardaki z-index:auto değeri gibi davranır ve sayısal atamaları dikkate almaz.

<body>
    <div class='kapsul'>
	    <div class='bir'><div class='iki'></div></div>
    </div>
</body>

z-index değeri yüksek olmasına rağmen bir sınıfını alan katmana altta kalacaktır. Çünkü iç içe geçmiş elementlerde z-index’e atanan sayısal değerler geçersizdir. Sıralama z-index:auto ya göre yapılır.

Sonuç

Sonuç olarak z-index özelliğinin çok kullanışlı ancak sorunları çok bir özellik olduğunu düşünüyorum. Birçok makalede istediğim manada detaylı bir z-index anlatımı bulamadığımı itiraf etmeliyim. Ancak kodlama yaparken aklımızda olması gereken kuralları kavrarsak z-index özelliğini daha bilinçli kullanacağımız kesin:

• z-index değeri; aynı z-ekseninde bulunan(kapsayan elementler hariç) katmanların altta mı üstte mi kalacağınız belirlemek için kullanılır.
• z-index sadece position değeri relative, absolute ve fixed olan nesnelere uygulanır.
• Saydamlık değeri(opacity) 1′den küçük verilen nesnelerde z-index kullanımı daha kolay anlaşılır.

Konumlandırma uygulanmış elementlerde z-index etkileri

• Mevcut sıralama durumunda elementin sırasını belirler
• Elementin kendi kısmındaki durumun belirler

Eğer z-index değeri atanmamış ise z-eksenindeki arkadan öne doğru sıralama aşağıdaki gibidir:

• Normal akıştaki kutular koddaki sıraya göre sıralanır
• float uygulanmış kutular
• Konumlandırma uygulanmış elementlerde ise kodlamadaki sıraya göre

z-indeks ile ilgi bazı problemler ve çözüm önerileri var bunları aşağıda listeledik bu linklerdeki çözümleri incelemenizi tavsiye ederiz. Karşıma çıkan bazı problem ve çözümleri sitede yayınlamaya devam edeceğim.

Kaynaklar

• http://www.search-this.com/2007/08/15/give-me-some-zzzzzs/
• http://www.brainjar.com/css/positioning/default5.asp
• http://joshuaink2006.johnoxton.co.uk/blog/82/flash-content-and-z-index (flash ve html elemtnleri)
• http://www.blooberry.com/indexdot/css/properties/position/zindex.htm (tarayıcı destek)
• http://www.westciv.com/style_master/academy/css_tutorial/properties/page_layout.html#z-index
• http://developer.mozilla.org/en/docs/Understanding_CSS_z-index
• http://css-discuss.incutio.com/?page=OverlappingAndZIndex
• http://csscreator.com/blog/z-index
• http://www.fatihhayrioglu.com/?p=151
• CSS Mastery Advanced Web Standards Solutions
• Cascading Style Sheets The Definitive Guide
• Wrox Beginning CSS 2nd.Edition

Sorunlar ve çözümler

• http://brandonaaron.net/docs/bgiframe/
• http://www.askapache.com/css/getting-flash-to-show-up-in-front-of-content.html
• http://www.last-child.com/conflicting-z-index-in-ie6/
• http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
• http://www.hedgerwow.com/360/bugs/css-select-free.html
• http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx
• http://randsco.com/index.php/2005/09/11/changing_z_index_on_hover

Burada CSS ile konumlandırma hakkında bilgi vermeye çalışacağız.

Konumlandırma ile alakalı olduğu için blok-level ve inline-level elementlerin tanımını tekrarlayacağız.

Blok-level elementler : Blok-level elementingörünüş formatı bir kutu gibidir. Blok-level elementler inlineelementleri ve diğer blok-level elementleri içerebilir. Tipiközellikleri yeni bir satır başlangıcı yapmalarıdır. Örnek: h6, p, li

Inline-level Elementler : Inline-level elementler biriçerik gibi görünür, diğer bir inline elelementiiçerebilir. Yeni satır veya boşluk oluşturmazlar. Örnek: a, strong,span

Ancak bizbu elementlerin başlangıç değerlerini display özelliği ile değiştirebilriz. Yani biz bir inline-level element olan bir linki(<a>….</a>) blok-level bir elemente dönüştürebiliriz. Aynı şekilde bilr blok-level elementi inline elemente dönüştürebilriz.

CSS’deüç temel konumlandırma şekli vardır: normal akış(position:static ve position:relative), float ve mutlak konumlar(position:absolute). Tüm elementler başlangıçta normal akış şeklindekonumlandırılmıştır.

Normal Akış

Eğer sayfalardaki elementlere herhangi bir konumlandırma yapılmamış ise veya float değeri verilmemiş ise sayfaya normal akış konumlandırması uygulanır. Sayfailk element en üstte son elementte en sonda olacak şekilde sıra ile aşağı doğru sıralanacaktır.

Inlene kutular yatay olarak tasarlanır. Yatay boşluk margin, padding ve kenarlıkla hesaplanır. Bu nedenle dikey margin, padding ve kenarlık değerleri etkisizdir.

position

Yapısı : position: <deger>
Aldığı Değerler : static | relative | absolute | fixed | inherit
Başlangıç değeri: static
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

top, right, bottom, left

Yapısı : top, right, bottom, left : <deger>
Aldığı Değerler : <uzunluk> | <yüzde> | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: postion uygulanan elementlere
Kalıtsallık: Yok

Göreceli Konumlandırma(position:relative)

Göreceli konumlandırma anlaşılması kolay bir konsepttir. Bir elemente göreceli bir değer verdiğiniz de o bulunduğu yeri dikkate alarak verilen değerleri uygulayacaktır. Bir elementin(göreceli) başlangıç noktasını dikey ve yatay olarak değiştirebilriz. Eğer biz elementin üst(top) değerine 20px tanımlarsak element bulunduğu yerden 20px aşağıya kayacaktır, eğer elementin sol(left) değerini 20px olarak tanımlarsak elementimiz soldan 20px sağa doğru kayacaktır.

p#FarkliParagraf{
    position: relative;
    left: 20px;
    top: 20px;
}

Görecelikonumlandırma kullanılarak yeri belirlenen bir elementin başlangıçtaki konumundaki boşluğu ve diğer elementlerle arasındaki mesafeyi koruyacaktır.

Mutlak(Absolute) Konumlandırma

Görecelikonumlandırma Normal Akış’ın bir parçasıdır. Aksine Mutlak Konumlandırmada uygulanan elementbulunduğu yere boşluk bırakmayacaktır. Diğer elementler normal akıştakiyerlerini bu elementi yoksayarak devam edeceklerdir. Aşağıdaki şekilde görüldüğü gibi

Mutlak konumlandırılmışelementin konumu en yakındaki üst elementin konuma bağlıdır. Eğer birata elementin konumu belirlenmemişse elementimiz ana bloka göre konumalanacaktır. Mutlak konumlandırma HTMLelementi ve sayfa çözünürlüğünü ile ilişkilidir.

Göreceliolarak konumlandırılmış bir elementin içindeki Mutlak Konumlandırılmış birelement içerik blokunun üst,sağ,sol ve alttından hizalandıralabilir.Bu kullanım bize bir çok uygulmada yardımcı olacaktır ve bu kullanım ile çok güzel snuçlar elde edeceğiz.

İnsanların konumladırma ile iligi genel problemeleri hangikonumlandırma seçeneğinin ne işe yaradığını unutmalarıdır. Göreceli Konumlandırmasayfadaki elementin başlangıç durumuna göre göreceli bir durumda olduğunu,oysa Mutlak Konumlandırmanın en yakın ata elemente veya içerik blokunagöre göreceli değer içerdiğidir.

Mutlak Konumlandırma ile yerleştirilmiş element sayfada elementi normal akışın dışına çıkarır. Bu element diğer elementlerinüzerine binecektir. Bu üstte kalma altta kalma işinide z-index özelliğiile hallede bilriz. z-index değeri büyük olan element üstte küçük olan element ise altta kalacaktır.

z-index

Yapısı : z-index: <deger>
Aldığı Değerler : <sayısal değer > | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: postion uygulanan elementlere
Kalıtsallık: Yok

Örneğin geniş bir blok içindeki bir parafratakiyazıların sağ ve altta olmasını istiyorsak. Dıştaki içerik kutusunugöreceli konumlandırıp içindeki paragrafı mutlak konumlandırarak bu işhalledebilriz.

#adresler {
width: 700px;
height: 100px;
position: relative;
}
#adresler .tel {
position: absolute;
right: 10px;
bottom: 10px;
text-align: right;
}

<div id="adresler">
<p class="tel">Tel: 0845 838 6163</p>
</div>

Not:Bu kullanım gelişmiş tarayıcılar için geçerlidir. IE 5.5 veIE 6(Windwos)’da bu sorun çıkarır. Sorunu engellemek için yükseklik ve genişliktanımı yapılmalıdır.

Mutlak konumlandırma sayfa planlamasınınyaparken çok kullanılır. Özellikle göreceli konumlandırılmışbirata element varsa. Tüm siteyi sadece Mutlak Konumlandırma ile planlayabilmemiz mümkündür. Bunun için tüm elementlerin belirli boyutlandırmaişlemleri yapılması şarttır tabi bu elementlerin üst üste binmesiniengellemek için. Çünkü Mutlak Konumlandırılmış bir element doküman akışı dışına çakacaktır ve normal akıştaki element kutularına etkietmeyecektir. Eğer siz Mutlak Konumlandırdığınız elementi genişletmekisterseniz örneğin font boyutunu arttırdığınızda elementi kapasayan kutu normale göre genişlese de etrafındaki elemtlerinakışıdaki yeri değişmeyecektir.

Sabit(Fixed) Konumlandırma

Sabitkonumlandırma Mutlak Konumlandırmanın bir alt katagorisidir. Sabitkonumlandırılmış elementin sayfadaki görünümü çok farklıdır. Bunu özellikle websayfasında bir elementin konumu sabitlemek için kullanabiliriz. Sabit konumladırılma ile yerleştirilmiş element belirtilen yerde asılı kalacaktır. Web tarayıcısının kaydırma çubuğu aşağı yukarı kaydırılması ile Sabit Konumlandırma ile yerleştirilmiş elementin yeri değişmeyecektir ve sabit kalacaktır. Ne yazıkki IE 6 bu özelliği desteklemiyor.IE 7 strick yorumlayıcısı kullanılıyorsa destekliyor diğer hallerde desteklemiyor. Ama bu problemi javascript ile çözümü vardır. Bir link

Kaynaklar

• CSS Mastery:
  Advanced Web Standards Solutions
• Muhammed Sevim
• Web Standards Solutions: The Markup and Style Handbook