css - Why does my image overlap with my words? -

why images overlapping words? below css of 5 different images , 1 table.

#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%;  } 

as can see used position absolute. therefore if have not mistaken, position of second table should going according image width , height since memberreporthistorytable2 below images. unfortunately, doesn't. can see image below, overlaps click data.

this layout when no data being clicked

here image overlap.

i tried adding margin-top extend distance of table images. however, i'm trying make dynamic. means, table 2 change accordingly automatically when clicked data.

    #memberreporthistorytable2 {     position:absolute;     width:100%;     margin-top:30%; } 

under source code

<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> 

i have placed image in td. td under tr. believe wrapping picture 1 1 , placing place want doesn't work have been doing.

may ask have done wrong let change position dynamically apart position absolute?

regards.

this happens because you're absolute positioning images. better wrap images inside div, place want.