Implement z-index to the particular div element

hi all i wanted to put the z-index to ensure that the "Event today" will be behind the element(collapse). Here is my code below....

    <div id="infobox" class="collapse"  >
                <table id="attacks" class="display" cellspacing="0" width="100%"  >
                    <thead style="z-index:10">
                        <tr>
                            <th>Time</th>
                            <th>Attacker</th>
                            <th>Target</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>Time</th>
                            <th>Attacker</th>
                            <th>Target</th>
                        </tr>
                    </tfoot>
                </table>
            </div>

<div class="toolbar-left2 noselect" >
        <table>
            <tr>
                <td style="color:white;background-color:#000000;">Events Today: <font></font></td>
                <td id="totalattack" style="color:white;background-color:#000000;">0      </td>
                <td align="right"id="todaytime" style="color:white;background-color:#000000;">Current Time</td>
            </tr>
        </table>
    </div>

My question is how to ensure that the clock element is behind the element which contains the class collapse...Please help me thank you.

Solution

Your z-index: -10 does indeed make your element appear behind other elements.

Only content that is 'positioned', such as with position: absolute, position: fixed or position: relative will respect z-index. Note that the default position: static does not obey z-index.

Also, keep in mind that the default z-index is 0. Although your element will appear to be on top of elements such as <body> and <html>, it will actually be behind them.

Here's a working example, showcasing that your element gets hidden behind a red square:

#sample {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="toolbar-left2 noselect" style="z-index:-10">
  <table>
    <tr>
      <td style="color:white;background-color:#000000;">Events Today:
        <font></font>
      </td>
      <td id="totalattack" style="color:white;background-color:#000000;">0 </td>
      <td align="right" id="todaytime" style="color:white;background-color:#000000;">Current Time</td>
    </tr>
  </table>
</div>

<div id="sample"></div>

In your example, you'll need to add a position to both .collapse and .noselect, and make sure to give .collapse a higher z-index than .noselect. In the following example, I've also changed the text to red to help illustrate this:

.collapse {
  position: relative;
  z-index: 10;
  color: red;
}

.noselect {
  position: absolute;
  top: 0;
  left: 0;
}

<div id="infobox" class="collapse">
  <table id="attacks" class="display" cellspacing="0" width="100%">
    <thead style="z-index:10">
      <tr>
        <th>Time</th>
        <th>Attacker</th>
        <th>Target</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Time</th>
        <th>Attacker</th>
        <th>Target</th>
      </tr>
    </tfoot>
  </table>
</div>

<div class="toolbar-left2 noselect">
  <table>
    <tr>
      <td style="color:white;background-color:#000000;">Events Today:
        <font></font>
      </td>
      <td id="totalattack" style="color:white;background-color:#000000;">0 </td>
      <td align="right" id="todaytime" style="color:white;background-color:#000000;">Current Time</td>
    </tr>
  </table>
</div>

Hope this helps! :)