html - Make dot float on the table header -


i wondering how make dot example here https://gyazo.com/b757f6e984c19f7f4fc433f8147a5103 float on top don't understand how have tried position absolute , putting in in tbody , has not worked. here code:

<tr>                                 <th scope="row">                                     <i class="active"></i>                                     <p>magic</p>                                 </th>                                 <td>magic</td>                                 <td>magic</td>                                 <td>                                     <p>magic</p>                                 </td>                                 <td>                                     <p>magic</p>                                 </td>                                 <td>                                     <div class="dropdown">                                         <button class="btn dropdown-toggle" type="button" id="dropdownmenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">                                             <i class="material-icons">more_vert</i>                                         </button>                                         <ul class="dropdown-menu" aria-labelledby="dropdownmenu1">                                             <li><a href="#"><i class="material-icons"></i>start</a></li>                                             <li><a href="#"><i class="material-icons"></i>stop</a></li>                                             <li><a href="#"><i class="material-icons"></i>delete</a></li>                                         </ul>                                     </div>                                 </td>                             </tr> 

i think want this:

<html> <head>     <style>         .box {             width: 80%;             height:40px;             background: red;             z-index: 1;             position: absolute;         }         .dot {             width: 25px;             height: 25px;             border-radius: 50%;             background: green;             top: 20%;             right: 0%;             transform: translate(50%);             position: absolute;          }     </style> </head>  <div class="box"><div class=dot></div></div> 

basicly need have dot should float out of div right? in case, need set position: absolute; set in side dot should be, example if want dot in picture need set right: 0% still inside div, add transform: translate(-50%, 0%) , job if have question comment, hope solved problem!


Comments

Popular posts from this blog

inversion of control - Autofac named registration constructor injection -

verilog - Systemverilog dynamic casting issues -

ios - Change Storyboard View using Seague -