css - 为什么我的形象与我的文字重叠？

Question

为什么我的图像与文字重叠？下面是 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 包裹起来并将其放置在我想要的地方是行不通的，因为这是我一直在做的。

请问我哪里做错了让它动态改变位置而不是绝对位置？

问候。

Answer 1

发生这种情况是因为您对图像进行了绝对定位。最好将这些图像包装在一个 div 中，然后将其放置在您想要的位置。