myNotlar Logo

position


Internet Explorer Firefox Opera

position özelliği, elementin sayfa üzerinde veya ana elementi içinde yerleştirilme şeklini belirler.

DOM Sözdizimi

element.style.position = "yerlesim"

CSS Sözdizimi

position: yerlesim
yerlesim

static, relative, absolute ve fixed değerlerinden birini alarak elementin yerleşim şeklini belirler. Yerleşim özellikleri olan top, right, bottom ve left özellikleri kullanılabilir.

  • static : Yerleşim kurallarına göre standart şekilde yerleştirilir. Yerleşim özellikleri kullanılamaz.
  • relative : Ana elementine bağıntılı olarak yerleştirilir. Yerleşim özellikleri ana elementi baz alınarak hesaplanır. Bu değer table elementinin alt elementleri (tr, th, td vb.) için kullanılamaz.
  • absolute : Sayfa üzerinde yerleşim özellikleri ile belirtilen konuma yerleştirilir. Yerleşim özellikleri sayfaya göre hesaplanır.
  • fixed : Sayfa üzerinde yerleşim özellikleri ile belirtilen konuma yerleştirilir. Yerleşim özellikleri sayfanın görünen kısmı baz alınarak elle atanabilir. Sürükleme çubuklarındaki değişim elementin konumunu değiştirmeyecek, element tarayıcının görünen alanında sabit/asılı kalacaktır.

İlgili nesne/element, bu değerlerin hepsinde, doküman ağacına göre ana elementinin altında bulunur. Örneğin, değerin absolute olması durumunda element gene ana elementine bağlıdır. Fakat, yerleşim hesaplaması sayfaya göre yapılır.

Aşağıdaki örnek, position özelliğinin kullanımını göstermektedir.

<style type="text/css">
.rel
{
    width:120px;
    height:90px;
    background-color:#2080E0;
    
    opacity:.6;
    filter: alpha(opacity=60);
    
    left:10px;
    top:10px;    
    
}
td.kutu
{
    width:140px;
    height:110px;
    background-color:#D0D0D0;
}
</style>

<script type="text/javascript">
function posAyarla(konum)
{
    var kutu = document.getElementById("ornekKutu");
    
    kutu.style.position = konum;
}
</script>
<input type="button" value="position: static" onClick="posAyarla('static')" />
<input type="button" value="position: absolute" onClick="posAyarla('absolute')" />
<input type="button" value="position: relative" onClick="posAyarla('relative')" />
<input type="button" value="position: fixed" onClick="posAyarla('fixed')" />

<table><tr>
<td class="kutu">
<div id="ornekKutu" class="rel"></div>
</td></tr></table>
Test Edin
İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | YasinKa |