Как z-индекс и фиксированное положение работают вместе в css

html

<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:

.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;
}

Теперь, как я могу разместить h3 внутри .fixed div поверх наложения. Пожалуйста, разместите некоторое чтение на фиксированном и z-index.

http://jsfiddle.net/CvMLw/4/ Проверьте приведенный выше jsfiddle, так как я могу взять h3 поверх наложения.

Ответы

Ответ 1

Вы устанавливаете z-index для элемента внутри фиксированного div, который находится под наложением.

Другими словами, наложение, скрывающее значение z-index, равно 301.

Понимаете, это похоже на блоки lego. .fixed находится на дне с его z-индексом при 0.

Затем на .fixed ваш h3 будет 300 блоков один над другим.

Если добавить, например, еще один div под тегом h3 с z-index из 150, "башня блоков" будет ниже, чем h3, поэтому h3 будет на вершине.

Тогда есть еще один div (.overlay) на том же уровне DOM, что и .fixed с более высоким z-index, чем .fixed. Этот блок будет размещен прямо над 300 блоками h3.

Например:

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

Чтобы установить h3 сверху, поместите его на том же lvl вашего наложения или установите более высокий .fixed z-index.

Ответ 2

Вы не можете этого сделать, если элемент .fixed действует как держатель для любого из его дочерних элементов.

Это означает, что если вы, например, установили h3 с абсолютной позицией снизу, она будет в нижней части родительского элемента.

z-index работает одинаково. Его значение будет унаследовано родителем. Поскольку значение z-index по умолчанию 0, ваш элемент .fixed имеет значение z-index 0, а ваш h3 имеет первый 0, а затем 300.

Ответ 3

Измените

position:fixed;

to

position:absolute;

on .fixed, то он работает.