Z endeksi ve pozisyon css

Question

html birlikte çalışmayı sabit nasıldır

<div class="overlay"> 

</div> 
<div class="fixed"> 
    <center> 

     <h3> 
      Only this thing should be brought on top of overlay.. 
     </h3> 
    </center> 

</div> 

<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br> 

CSS: Artık

.fixed{ 
    position: fixed; 
    width: 100%; 
    height: 60px; 
    top:0; 
    left: 0; 
    background: #f4f4f4; 
} 
.fixed h3{ 
    position:relative; 
    z-index: 300; 
    color: #fff; 
} 

.overlay{ 
    background-color: #000; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    opacity: .5; 
    position: fixed; 
    z-index: 1; 
    -webkit-transition: all 0.3s ease-out; 
     -moz-transition: all 0.3s ease-out; 
     -ms-transition: all 0.3s ease-out; 
     -o-transition: all 0.3s ease-out; 
      transition: all 0.3s ease-out; 
} 

nasıl bindirme üstünde .fixed div içinde h3 olsun yerleştirebilirim. Lütfen z-endeksi ile birlikte sabitlenmiş bazı okumalar gönderin.

http://jsfiddle.net/CvMLw/4/ Kontrol yukarıdaki jsfiddle, Peki ben ..

Answer 1

Sen bindirme altında sabit div içinde bir eleman üzerinde z-index set bindirme üstünde h3 getirmek yapmak. Başka bir deyişle

, z-index değerini gizleme bindirme Görüyorsunuz 301.

, bu lego blokları gibi. .fixed, z-endeksi 0'da

ile .fixed adresinde h3 ürününüzün diğeri 300 blok üzerindedir.

biz eklerseniz, örneğin, 150 z-index ile h3 etiketinin altına başka div, "blokların kule" h3 böylece h3 üstünde olacağını daha düşük olacaktır.

sonra .fixed daha z-index yüksek olan .fixed aynı DOM düzeyde bir div (.overlay) vardır. Bu blok, h3 numaralı 300 bloğun üzerine yerleştirildi. Örneğin

:

<==============================> <- the .overlay (z-index 1) 
      <=> 
      <=> 
      <=> 
      <=> 
    <=>  <=>    <- Elements inside .fixed (random z-index) 
    <=>  <=> 
    <=>  <=> 
    <=>  <=> 
    <=>  <=> 
<==============================> <- the .fixed (z-index 0) 

üstte h3 set Bindirmenizi aynı lvl üzerine koydu ya daha yüksek .fixedz-index ayarlayın.

Answer 2

.fixed öğesi, herhangi bir alt öğesi için ürün numarası olarak çalışıyorsa bunu yapamazsınız.

Bu örneğin, altına mutlak pozisyon ile h3 set, eğer kendi üst elemanın altına gidecek demektir.

z-index aynı şekilde çalışır. Değeri ebeveyn tarafından miras alınacaktır. z-index varsayılan değer 0 olduğu için, lütfen .fixed eleman 0 bir z-index değerine sahiptir ve sizin h30 ve sonra 300 ilk sahiptir.

Answer 3

, o zaman işler senin

position:fixed; 

.fixed üzerinde

position:absolute; 

değiştirin

.