Css Z-İndex İle Katman Oluşturamama

Tahribat.com Forumları
line

Html - CSS - XML - JavaScript - Ajax
line

Css Z-İndex İle Katman Oluşturamama

25/Haz/16 17:34 Kısayol Şikayet Özel Mesaj

coder2

Kayıt Tarihi: 15/Mart/2007

Arkadaşlar tasarımda üst-sağ ve sol kısımlar position:fixed; orta kısım ise scroll bar aşağı indikçe aşağı doğru kayıyor. Fotoğrafta göreceksinizdir..

Mesele şu ki arka plan rengini background-color ile verdiğim için olsa gerek z-index versem de içerik aşağı doğru kaydığında üst kısımda görünüyor (Foto ya bakarsanız ne demek istediğimi anlayacaksınız.) Üst kısımın arka plan ını img kullanınca katman verip hallediyorum ama color verince foto daki gibi çirkin bir görüntü çıkıyor. "uludağ sözlükteki gibi scroll barın sadece orta alanı kaydırmasını sağlamak istiyorum."

Bu konuda tavsiyeniz ya da göstereceğiniz bir yol varsa sevinirim..

[url=http://hizliresim.com/Zd5opV][img]http://i.hizliresim.com/Zd5opV.png[/img][/url]

[url=http://hizliresim.com/o7d4p9][img]http://i.hizliresim.com/o7d4p9.png[/img][/url]

Önceleri Kızlar Utanınca Kızarırdı Şimdilerde Kızarınca Utanıyorlar..

Alıntı yap
26/Haz/16 00:55 Kısayol Şikayet Özel Mesaj
21li

Kayıt Tarihi: 21/Haziran/2015
sağ ve sol üst kısımları neden ayrı olarak fixledin? ikisinide bi dive al divi fixle direk + z-index ve renk olayını pek anlamadım z-index in amacı üst üste olan divlerden önde olmak istediğini belirtmeni sağlaması. konuyu tam olarak anlarsam yardımcı olabilirim diye düsünüyorum fakat tam olarak ne anlatmak istediğini anlamadım:) şayet orta kısım scrollbar olsun istiyorsan bu kodları ortakısmın kapsayıcı divine ekle gerekli ayarlamaları kendine göre yap olur..
```
html {
    overflow: auto;
}
body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px; 
    overflow-y: scroll;
    overflow-x: hidden;
}


::-webkit-scrollbar {
    width: 12px;
}
 

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}
```
21li tarafından 26/Haz/16 00:57 tarihinde düzenlenmiştir

Çocukken müzik kesilince sandalyelere oturmaya çalıştığımız oyun, meğerse hep otobüsün alıştırmasıymış.
Alıntı yap
26/Haz/16 14:52 Kısayol Şikayet Özel Mesaj
coder2

Kayıt Tarihi: 15/Mart/2007
Hocam üst kısım zaten tek div içinde fixed edilmiş , örnek kod yapısını aşağıda yazayım fikir oluşması amacıyla..
```
<div id="ust">
    
</div>
<div id="sol">
    
</div>
<div id="orta">
    
</div>
<div id="sag">
    
</div>
```
```
#ust {
position:fixed;
top:0;
height:100px;
width:auto;
z-index:2;
}

#sol {
position:fixed;
top:100px;
height:500px;
width:200px;
}

#orta {
top:100px;
height:auto;
width:800px;
z-index:1;
}
#sag {
position:fixed;
top:100px;
height:500px;
width:200px;
}
```
Kodlarda göründüğü gibi orta alan hariç üst - sağ ve sol kısımlar fixed edilmiş. Tarayıcı da scroolbar aşağı indirilince orta alandaki içerik hareket ediyor sadece. Buraya kadar sorun yok.

Fakat fotoğrafta da göründüğü gibi orta aladanki içerik (scrool bar aşağı indirilince) yukarı çıkınca üst bölümdeki logo ve arama inputlarının olduğu yer de de görünüyor. Benim istediğim üst kısımda bunlar görünmesin onun dışında hiçbir sorun yok

Önceleri Kızlar Utanınca Kızarırdı Şimdilerde Kızarınca Utanıyorlar..
Alıntı yap
26/Haz/16 16:44 Kısayol Şikayet Özel Mesaj
wert

Kayıt Tarihi: 19/Eylül/2005
```
#orta {
top:100px;
height:auto;
width:800px;
z-index:-1;
}
```
olsa kurtarmazmı

|sadece aptalların başarısı ders notu ile ölçülür|
Alıntı yap
26/Haz/16 16:54 Kısayol Şikayet Özel Mesaj

coder2

Kayıt Tarihi: 15/Mart/2007

yok hocam değişen birşey yok.. Üst bölüme background olarak img verirsem oluyor fakat img değilde color renk verince olmuyor

Önceleri Kızlar Utanınca Kızarırdı Şimdilerde Kızarınca Utanıyorlar..

Alıntı yap
18/Tem/16 11:34 Kısayol Şikayet Özel Mesaj

coder2

Kayıt Tarihi: 15/Mart/2007

https://jsfiddle.net/coderiki/8rw3tajw/

Bu şekilde üst e ve alt ta ayrı ayrı background belirttim ve oldu. body de tek belirtince olmuyordu. İlerde takılan olursa diye örnek kod yazdım jsfiddle de.

coder2 tarafından 18/Tem/16 11:35 tarihinde düzenlenmiştir

Önceleri Kızlar Utanınca Kızarırdı Şimdilerde Kızarınca Utanıyorlar..

Alıntı yap

Toplam Hit: 873 Toplam Mesaj: 6
z-index css

Cevapla