覆盖/重叠元素

见我的代码：覆盖/重叠元素

<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

覆盖/重叠元素

回答

相关问题