使點浮在表頭

我想知道如何在這裏例如點作一個點https://gyazo.com/b757f6e984c19f7f4fc433f8147a5103浮在頂上這樣我不明白我會如何做到這一點我已經試過位置絕對，並把它放在哪該tbody並沒有奏效。這裏是我的代碼：使點浮在表頭

<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>

來源

2017-04-06 Thelightdev

，可以用[z索引（https://developer.mozilla.org/en/docs/Web/CSS/z-index）以顯示其上的所有其他內容。你到目前爲止嘗試過哪些CSS？因爲我只看到HTML ... –

@TomUdding我的意思是我只把位置：絕對;整個事情消失了。 – Thelightdev

我想你想是這樣的：

<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你需要有應該飄出來的DIV右側爲點？在這種情況下，你只需要設置position: absolute;然後設置在點的哪一邊，例如，如果你想要一個點就像在圖片中你需要設置right: 0%，但它仍然會在div內，所以添加transform: translate(-50%, 0%)如果你有問題只是評論，它會做的工作，希望我解決了問題！

來源

2017-04-06 17:10:24

請看這裏，你可能正在尋找這個。

演示：這裏https://plnkr.co/edit/qM6rnLCEtgG3TQkxQjOe?p=preview

<table> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Ip Address</th> 
     <th>Created</th> 
     <th>DataCenter</th> 
     <th>Tags</th> 
     <th> 
     <div class="dropdown"> 
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">More_vert 
              <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu"> 
      <li> 
       <a href="#">Start</a> 
      </li> 
      <li> 
       <a href="#">Stop</a> 
      </li> 
      <li> 
       <a href="#">Delete</a> 
      </li> 
      </ul> 
     </div> 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td style="position:relative;padding-left:20px;">Name_xxx 
     <div class="circle"></div></td> 
     <td>123.168.1.40:8080</td> 
     <td>12-10-2010</td> 
     <td>ABC_XXX</td> 
     <td> 
     <input type="radio"> 
     </td> 
     <td>&nbsp;</td> 
    </tr> 
    </tbody> 
</table>

來源

2017-04-06 17:29:48

得到一個例子table代碼。希望你有幫助。

https://jsfiddle.net/rafalito1989/d6pxf26x/

來源

2017-04-07 11:48:21

使點浮在表頭

回答

相關問題