position

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

Telif Hakkı © 2007-2018 mynotlar.com Tüm Hakları Saklıdır.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |