html - Implement z-index to the particular div element -


hi wanted put z-index ensure "event today" behind element(collapse). here 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 how ensure clock element behind element contains class collapse...please me thank you.

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

only content 'positioned', such position: absolute, position: fixed or position: relative respect z-index. note default position: static not obey z-index.

also, keep in mind default z-index 0. although element appear on top of elements such <body> , <html>, behind them.

here's working example, showcasing element gets hidden behind 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 example, you'll need add position both .collapse , .noselect, , make sure give .collapse higher z-index .noselect. in following example, i've changed text red 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 helps! :)


Comments

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -