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