为什么我的图像与我的文字重叠?下面是 5 个不同图像和 1 个表格的 CSS。
#memberreporthistoryimage1 {
position:absolute;
left:20%;
}
#memberreporthistoryimage2 {
position:absolute;
left:40%;
}
#memberreporthistoryimage3 {
position:absolute;
left:60%;
}
#memberreporthistoryimage4 {
position:absolute;
left:30%;
margin-top:20%;
}
#memberreporthistoryimage5 {
position:absolute;
left:50%;
margin-top:20%;
}
#memberreporthistorytable2 {
position:absolute;
width:100%;
}
如您所见,我将自己的立场用作绝对。因此,如果我没记错的话,我的第二张桌子的位置应该根据我的图像宽度和高度,因为 memberreporthistorytable2 在我的图像下方。不幸的是,事实并非如此。从下图中可以看出,只要我单击一些数据,它就会重叠。
这是没有点击数据时的布局
这是重叠的图像。
我尝试添加margin-top,这显然会延长表格与图像的距离。但是,我试图让它看起来充满活力。这意味着,当我单击数据时,表 2 将自动更改。
#memberreporthistorytable2 {
position:absolute;
width:100%;
margin-top:30%;
}
在我的源代码下
<tr>
<td id="memberreporthistoryimage1">
<asp:Image ID="Image1" runat="server" />
</td>
<td id="memberreporthistoryimage2">
<asp:Image ID="Image2" runat="server" />
</td>
<td id="memberreporthistoryimage3">
<asp:Image ID="Image3" runat="server" />
</td>
<td id="memberreporthistoryimage4">
<asp:Image ID="Image4" runat="server" />
</td>
<td id="memberreporthistoryimage5">
<asp:Image ID="Image5" runat="server" />
</td>
</tr>
我已将所有图像放在 td. 所有的 td 都在 tr 下。因此,我相信将我的图片 1 逐 1 包装并将其放置在我想要的地方是行不通的,因为这是我一直在做的。
请问我在哪里做错了让它动态改变位置而不是绝对位置?
问候。