为什么我的图像与我的文字重叠？

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逐行包装并将其放置到我想要的地方并不起作用，因为这是我一直在做的。

我可以问我在哪里做错了让它从绝对位置动态改变位置？

的问候。

Answer 1

这是因为您对图像的绝对定位。更好地将这些图像包装在div中，然后将其放在您想要的位置。