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
Post a Comment