Css ustaları position:fixed ve absolute ile ilgili bir sorun

Merhaba arkadaşlar.Css position fixed ve absolute değerleriyle alakalı bi sorunum var ve bi türlü içinden çıkamıyorum.

Sorun şöyle
İki tane div alanı var."alan1" isimli div alanı css kodlarındanda görüldüğü gibi position:fixed koduyla footer bölümüne sabitlenmiş bir şekilde duruyor.Bu div alanının içerisinde bulunan "alan2" kısmını ise position:absolute; yazarak sayfanın en üstünde konumlandırmaya çalışıyorum ancak ne yaptıysam alan1 dışına çıkmıyor.

"alan1" isimli divdeki position:fixed; kodunu kaldırınca alan2 istediğim şekli alıyor ancak ben her ikisininde olmasını istiyorum.

Div alanları

<div class="alan1">
<div class="alan2"></div>
</div>

Css kodları

<STYLE type=text/css>
.alan1{z-index:1;position:fixed;width:100%;height:50px;bottom:0px;left:0px;background:#000;overflow:hidden;color:#fff;}
.alan2{z-index:2;position:absolute;top:0px;left:0px;height:50px;width:50px;background:#333;}
</STYLE>

alan2 yi belkide alan1 in içinde olmayan bir div olarak yazmalısınızdır?

soyle yapilabilir :

<div class="alan1">
<div class="alan2">
<div class="alan3">

</div>
</div>
</div>


alan 1 fixed
alan 2 relative
alan 3 absolute

olacak sekilde.

O şekilde tabiki mümkünde tasarıma uygun olması için alan1 içinde olması gerekiyor.Aslında benim yaptığım javascriptle yapılan bir işlemden sonra alan2'yi yukarı kısıma taşıttırmak.Bunun içinde söylediğim sorunu halletmem gerekiyor.

Dediğiniz gibi yaptım ancak yine olmadı

Zamanında

böyle birşey paylaşmıştım
"css tekerlemesi : position:absolute;, position:absolute; 'in position:relative; 'dir."

Aynı şey fixed içinde geçerli. İngilizcemin pek iyi olmadığından dolayı sağlıklı bir arama yapamadım ve kilitendim kaldım. İnş biri bu problemi çözer bizde öğrenmiş oluruz.

Yabancı sitelere bende baktım ancak hiçbir sonuç bulamadım.Mecbur olmasam kullanmıycamda mecburen çözmem gerekiyor bunu.

Doğru anladıysam alan1 sayfanın yukarısında, alan2 ise footer'da olacak. alan2 alan1 divinin içerisinde olacak. Bu durumda aşağıdaki gibi dener misiniz?

<STYLE type=text/css>
.alan1{
    z-index:1;
    position:absolute;
    width:100%;
    height:50px;
    bottom:0px;
    left:0px;
    background:red;
    overflow:hidden;
    color:#fff;
}
.alan2
{
    z-index:2;
    position:fixed;
    top:0px;
    left:0px;
    height:50px;
    width:50px;
    background:#333;
}
</STYLE>  

<div class="alan1">
<div class="alan2"></div>
</div>

z-index ile çözmüş oluyorsun değil mi?

@ruudler, hayır alan1 de ki position:fixed ve alan2 de ki position:absolute'ün yerlerini değiştirdim sadece. Çünkü alan1 üste alınmak isteniyor ancak alan2 içerisinde olduğu için fixed ile alamazsınız absolute ile div'den çıkarırsınız, sabitlenecek div içinde fixed verirsiniz sabitlenir, zaten alan1' bottom:0 ile aşağıya, alan2 ise top:0 ile yukarıya hizalanıyor.