覆蓋/重疊元素

見我的代碼：覆蓋/重疊元素

<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="[email protected]" property_name="PrimaryEmail" align="center">[email protected]</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;  
}

目前我映射！文本破壞以列標題名稱爲中心。我想知道是否可以覆蓋映射！文本在標題列名稱上（例如年齡），而列名稱仍由它的寬度居中居中？

來源

2012-12-24 Michael Z

你可以把「映射！」變成span並使用absolute positioning（父單元需要有position:relative）

來源

2012-12-24 12:46:19 Moseleyi

在這種情況下所有地雷（現在是4）將被放置在同一個地方。 –

如果每個家長都有'position：relative'，在這種情況下''，則不是。那麼它取決於你如何設計和定位它們，但它可以讓你將'映射'放在相對於其父母相同的位置 – Moseleyi

1）好，但即使在這種情況下，_mapped_位置將取決於列名稱文本，所以將位於標題單元的不同位置; 2）即使與_position：relative_ for _th_這不起作用 - 所有我的「_mapped！_」被放置在相對整個頁面，但不是_th_ cell！ –

請檢查以下代碼。我改變了字體大小和顏色添加到行，使UI可見正確..

<table id="preview_table"> 
<caption>List</caption> 
<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="col_name">DisplayName</div> 
     <div class="user_def_col">(user defined)</div> 
     <div class="mapped_col">MAPPED!!!!</div> 
    </th> 
    <th init_value="Email" style="text-align: center;" class=""> 
     <div class="col_name">PrimaryEmail</div> 
     <div class="user_def_col">(user defined)</div> 
     <div class="mapped_col">MAPPED!!!!</div> 
    </th> 
    <th init_value="Age" style="text-align: center;" class=""> 
     <div class="col_name">Age</div> 
     <div class="user_def_col">(user defined)</div> 
     <div class="mapped_col">MAPPED!!!!</div> 
    </th> 
</tr> 
</thead> 
<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="[email protected]" property_name="PrimaryEmail" align="center">[email protected]</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> 
</table>

CSS：「映射」

#preview_table .user_def_col { 
color: gray; 
font-size: 15px; 
} 

#preview_table .mapped_col { 
color: green; 
font-size: 12px; 
position: relative; 
    margin-top: -20px; 
    opacity: 0.5; 
} 
tr 
{ 
    border: 1px solid red; 
}

來源

2012-12-24 13:05:01 Narendra

這裏是小提琴http://jsfiddle.net/qShva/1/ – Narendra

它不起作用。 1）嘗試將_MAPPED !!! _放在與列名相同的行 - 它不起作用; 2）什麼是關鍵的CSS解決方案？ 3）爲什麼你複製粘貼我的代碼到你的答案？ –

共有3個HTML改變。我移動了映射！股利下跌。還有一些CSS更改完成。你有沒有檢查前面評論中提到的小提琴？ – Narendra

覆蓋/重疊元素

回答

相關問題