html - 叠加/重叠元素

Question

查看我的代码:

<table id="preview_table">
<thead>
<tr>
  <th class="not_mapped_style" style="display: none; text-align: center;">id</th>
  <th init_value="Name" style="text-align: center;" class="">
      <div class="mapped_col">mapped!</div>
      <div class="col_name">DisplayName</div>
      <div class="user_def_col">(user defined)</div>
  </th>
  <th init_value="Email" style="text-align: center;" class="">
      <div class="mapped_col">mapped!</div>
      <div class="col_name">PrimaryEmail</div>
      <div class="user_def_col">(user defined)</div>
  </th>
  <th init_value="Age" style="text-align: center;" class="">
      <div class="mapped_col">mapped!</div>
      <div class="col_name">Age</div>
      <div class="user_def_col">(user defined)</div>
  </th>
</tr>
</thead>
<caption>List</caption>
<tbody>
<tr>
  <td style="display: none;" property_value="0" property_name="id" align="center">0</td>
  <td class="" property_value="user" property_name="DisplayName" align="center">user</td>
  <td class="" property_value="admin@domain.com" property_name="PrimaryEmail" align="center">admin@domain.com</td>
  <td class="" property_value="69" property_name="Age" align="center">69</td>
  <td class="" property_value="+722616807" property_name="Hand_Phone" align="center">+722616807</td>
</tr>  
</tbody>

这是 CSS:

#preview_table .user_def_col {
color: gray;
font-size: .8em;
}

#preview_table .mapped_col {
color: green;
font-size: .6em;
float: right;    
position: relative;
top: -10px;    
}

目前我的 ma​​pped! 文本损坏了列标题名称的居中。我想知道是否可以将 ma​​pped! 文本覆盖在标题列名称上(例如 Age)，同时列名称保持以单元格宽度为中心？

Answer 1

你可以把“映射!”进入 span 并使用 absolute positioning (父单元格需要有 position:relative)