Merhaba arkadaşlar ben scroll özelliği olan div içerisindeki tıklayarak açılan menüde z-index sorunu yaşıyorum. Demo sayfa için bu linke tıklayın : DEMO

Sorun şu ki sayfayı açtığnızda sizde göreceksiniz. İçerisinde Click This yazan mavi butona tıkladığınızda açılan bir bubble div etiketi var fakat bu bubble div etiketini ben z-index kullanarak scroll divinin dışarısında görünmesini istiyorum. Bunu nasıl yapabilirim ?

soruldu: 03 Tem '14, 17:20

Cosmos's gravatar image

Cosmos
3016714
cevap kabul oranı: 100%


İleride bu tip bir sorun ile karşılaşırsanız diye cevabı açıklıyorum arkadaşlar anladığım kadarıyla kimse çözüm yolu üretememiş.

Yapmaya çalıştığım scroll özelliği olan div içerisinde tıklandığında açılan bir menü oluşturmaktı. Ancak anladım ki bu mümkün değil. Bu tip bir özelliği doğru kullanabilmek için z-index değeri etkisiz kalıyor. Tamamen overflow-x:hidden ve açılır menünüzün scroll dışında görünmesi içinde div i dışarıda tutmanız gerekiyor.

Aşağıdaki resimde gördüğünüz gibi div bubble div açılır durumda ve scroll içerisinde kalıyor. z-index değeri bu bubble div açılır kısmı dışarı çıkartmaya yetmiyor. Yani bu tip bir sorun ile karşılaşırsanız çözüm yolunu z-index de aramayın.

Çözümü scroll içerisinden dışarı taşmasını istediğiniz kısmı scroll div'in dışarısında tutmanız gerekiyor ve scroll özelliğindeki div Css özelliği overflow-x:hidden olmalı.

Örneğin: Aşağıdaki şekilde yapmayı denerseniz yanlış yapmış olursunuz: alt text

<div class="scroll-div">
    .... içerik ....
    <div class="acilir-kisim"></div>
</div>

kodlarınızı şu şekilde derleyin o zaman çalışacaktır. alt text

<div class="scroll-div">
    .... içerik ....
</div>
<div class="acilir-kisim"></div>

Kolay gelsin....

permanent link

cevaplandı: 04 Tem '14, 19:38

Cosmos's gravatar image

Cosmos
3016714
cevap kabul oranı: 100%

1

Bu da bir çözüm ama tek çözümü bu değil. Başka çözümlerde var. Örnekler: http://stackoverflow.com/questions/2817880/css-tooltip-inside-scrolling-div

(04 Tem '14, 20:12) AliRıza Adıyahşi ♦ AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image

Cevabınız için teşekkür ederim

(05 Tem '14, 05:10) Cosmos Cosmos's gravatar image
Cevabınız
toggle preview

Bu soruyu takip et

E-Posta üzerinden:

Üyelik girişi yaptıktan sonra abonelik işlemlerini yapabilirsiniz

RSS üzerinden:

Cevaplar

Cevaplar ve Yorumlar

Yazı Formatlama

  • *italic* ya da _italic_
  • **bold** ya da __bold__
  • link:[text](http://url.com/ "başlık")
  • resim?![alt text](/path/img.jpg "başlık")
  • liste: 1. Foo 2. Bar
  • temel HTML etiketleri de kullanılabilir

Bu sorunun etiketleri:

×72
×30
×6

Soruldu: 03 Tem '14, 17:20

Görüntüleme: 941 kez

Son güncelleme: 05 Tem '14, 05:10

powered by BitNami OSQA