Dıştaki DIV'in Sabit Kalması ve Sadece Içteki DIV'in Aşağı Doğru Kaydırılması?

denizbay · 4 Ağu 2013

İ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.

Not: Bu konuda henüz yeniyim ve detaylı açıklama yapabilirseniz çok sevinirim arkadaşlar.

aresrisus · 4 Ağu 2013

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="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>

Bu kodu bir incele sanırım aradığın bu

denizbay · 4 Ağu 2013

aresrisus' Alıntı:

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="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>

Bu kodu bir incele sanırım aradığın bu

Ne kadar teşekkür etsem azdır, sayende sorunu çözmüş bulunuyorum.

Özelliklerine baktığımda Z-İndex 1-2 ve Positioning kısımlarını gözden kaçırmışım sanırım.

Teşekkür ederim.

denizbay · 4 Ağu 2013

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.

aresrisus · 4 Ağu 2013

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.

Ara

Yeni mesajlar Yeni konular En çok mesaj En çok tepki En çok görüntülenen

Dıştaki DIV'in Sabit Kalması ve Sadece Içteki DIV'in Aşağı Doğru Kaydırılması?

denizbay

aresrisus

denizbay

denizbay

aresrisus