Dıştaki DIV'in sabit kalması ve sadece içteki DIV'in aşağı doğru kaydırılması?

D

denizbay

Üye
Kayıt
27 Temmuz 2013
Mesaj
6
Tepki
0
İki adet DIV var, biri dış yüzey ve diğeri de iç yüzey şeklinde...

Yalnız içteki DIV'i aşağı doğru atıyorum 200 px indirdiğimde, otomatik olarak dıştaki DIV'de 200 px aşağı kayıyor, yani her iki DIV'de ortak hareket ederek aşağı doğru aynı oranda kayıyorlar. Halbuki benim istediğim şey tam tersi olarak dıştaki DIV'in sabit kalması ve sadece içteki DIV'in aşağı doğru kayması.

Bu sorunu nasıl aşabilirim arkadaşlar, yöntem nedir, neyi eksik yapıyorum?

Teşekkür ederim.
 
Emre ÇETİNER

Emre ÇETİNER

Altın Üye
Altın Üye
Kayıt
23 Eylül 2012
Mesaj
483
Tepki
17


Sanırım bu şekilde bir görüntü elde etmek istiyorsun aşağıda senin için bir örnek hazırladım inceleyebilirsin.


HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta ***********="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
    .dis {
        background-color:#ff0000;
        width:400px;
        height:200px;
        position:relative;
        z-index:1;
        }
        
    .ic {
        background-color:#ff6600;
        width:200px;
        height:200px;
        position:absolute;
        z-index:2;
        top:100px;
        left:100px;
        }
</style>
</head>

<body>
    
    <div class="dis">
        <div class="ic">İç Div</div>
    </div>

</body>
</html>
 
D

denizbay

Üye
Kayıt
27 Temmuz 2013
Mesaj
6
Tepki
0
Peki burada önemli olan nokta alt ve üst Div'lerin z-index'lerinin "1 ve 2" olarak işaretlenmesi ve position'larının da "relative; ve absolute" olarak seçilmesi midir? Mantığını anlamaya çalışıyorum.
 
Emre ÇETİNER

Emre ÇETİNER

Altın Üye
Altın Üye
Kayıt
23 Eylül 2012
Mesaj
483
Tepki
17
position:relative; = sabit

position:absolute; = değişken

z-index:1 katmanlar photoshoptaki layer olarak düşünebilirsin. Burada dikkat etmen gereken 1 en alt katman 2,3,4,5 olarak üste çıkacaktır. Sayı değeri büyük olan katman üstte olacaktır.

absolute kullanırken bir de dikkat etmen gereken şeylerden biri hangi alan içerisinde değişken bir alan kullanmak istersen dıştaki divi position:relative etmelisin.

İki forumda da yazışmış olduk buradan devam edelim grafikerler.org :)
 
D

denizbay

Üye
Kayıt
27 Temmuz 2013
Mesaj
6
Tepki
0
@Emre ÇETİNER

Evet :)

Çok iyi anladım ve örneğin şu katmanları açıklamanız da çok iyi oldu ki, bu güne kadar onlarca Türkçe Div dökümanı inceledim ama hiç birisinde bu z-index, Position: absolute;/relative; olayından bahsedilmemişti. Ve elbette Div'lerin de Photoshop da olduğu gibi katmanlara ayrılabileceği... Çok yararlı bilgiler bunlar.

Peki değişkenlerden kasıt nedir tam olarak, div içine yerleştirilecek medya ögeleri falan mıdır?
 
Emre ÇETİNER

Emre ÇETİNER

Altın Üye
Altın Üye
Kayıt
23 Eylül 2012
Mesaj
483
Tepki
17
Yardımcı olabildiysem ne mutlu. Burada değişken sadece bir medya öğesi değil yazı buton aklına ve o an yaptığın işe göre neyse kullanılabilir. Örnek bir slider hazırladım butonları slider üzerine koymak istiyorsun dışarı değil o zaman slider alanını relative edip butonları absolute yapıp istediğin bölgede kullanabiliyorsun. z-index ile katmanı belirleyip slayt fotosunun altında kalmaması için butonları üst katman yapıyorsun. Ya da açılır bir menün var ve altında bir slider açılan menü slaytın altında kalmaması için z-index ayarlıyorsun. Bak açılan menülerde de position'ı absolute kullanman gerek yoksa açılan menu menünün dış divi iterek saçma bir görüntü olmasına sebep olur değişken yaparsan ana divden bağımsız çalışıyor.
 
Cevap yazmak için giriş yapmalısınız.
Yukarı Alt