我如何定位图像，以便它们使用HTML重叠表

Question

我的文本右图浮动，文本下方的表格。但是，该表被图像推向了。我如何组织桌子以使其出现在文本下面而不会影响图像放置？

我尝试使用相对和绝对div，但没有找到令人满意的答案。

<img src="https://www.myrfs.nsw.gov.au/portals/0/beyondblue.png" style="float: right; padding-left: 5px">
    <h3>beyondblue</h3>
    <p>beyondblue provides information and support to help everyone in Australia achieve their best possible mental health, whatever their age and wherever they live.</p>
    <table style="width: 0px;">
    <colgroup><col><col></colgroup>
    <tbody>
        <tr>
            <td><b>Website</b></td>
            <td><a href="http://www.beyondblue.org.au ">www.beyondblue.org.au</a></td>
        </tr>
        <tr>
            <td><b>Phone numbers</b></td>
            <td><p><b>Support</b>: <a href="tel:[phone]">1300 22 46 36</a>
            <br><b>Lifeline</b>: <a href="tel:131114">13 11 14</a>
            <br><b>Suicide Callback Service</b>: <a href="tel:[phone]">1300 659 467</a></p>
            <p>If you are in an emergency or at immediate risk of harm to yourself or others, please contact emergency services on <a href="tel:000">Triple Zero (000)</a>.</p></td>
        </tr>
        <tr>
            <td><b>Other services</b></td>
            <td>
            <ul>
                <li><a href="https://www.beyondblue.org.au/get-support/get-immediate-support" target="_blank">Online chat</a></li>
                <li><a href="www.facebook.com/beyondblue" target="_blank">Facebook</a></li>
            </ul>
            </td>
        </tr>
    </tbody>
    </table>

Answer 1

这就是您想要的吗？

.overlap{
    position: absolute;
    top:20px;
    left:20px;
}

<img src="https://www.myrfs.nsw.gov.au/portals/0/beyondblue.png" style="float: right; padding-left: 5px">
<div class="overlap">
<h3>beyondblue</h3>
<p>beyondblue provides information and support to help everyone in Australia achieve their best possible mental health, whatever their age and wherever they live.</p>
<table style="width: 0px;">
<colgroup><col><col></colgroup>
<tbody>
    <tr>
        <td><b>Website</b></td>
        <td><a href="http://www.beyondblue.org.au ">www.beyondblue.org.au</a></td>
    </tr>
    <tr>
        <td><b>Phone numbers</b></td>
        <td><p><b>Support</b>: <a href="tel:[phone]">1300 22 46 36</a>
        <br><b>Lifeline</b>: <a href="tel:131114">13 11 14</a>
        <br><b>Suicide Callback Service</b>: <a href="tel:[phone]">1300 659 467</a></p>
        <p>If you are in an emergency or at immediate risk of harm to yourself or others, please contact emergency services on <a href="tel:000">Triple Zero (000)</a>.</p></td>
    </tr>
    <tr>
        <td><b>Other services</b></td>
        <td>
        <ul>
            <li><a href="https://www.beyondblue.org.au/get-support/get-immediate-support" target="_blank">Online chat</a></li>
            <li><a href="www.facebook.com/beyondblue" target="_blank">Facebook</a></li>
        </ul>
        </td>
    </tr>
</tbody>
</table>
</div>

Answer 2

我添加了样式CSS，将位置更改为相对和<div>标签以产生所需的结果：

<style>
    .overlap{
    position: relative;
    top: -60px
 }
</style>
<img src="https://www.myrfs.nsw.gov.au/portals/0/beyondblue.png" style="float: right; padding-left: 5px">
<h3>beyondblue</h3>
<p>beyondblue provides information and support to help everyone in Australia achieve their best possible mental health, whatever their age and wherever they live.</p>
<div class="overlap">
<table style="width: 0px;">
<colgroup><col><col></colgroup>
<tbody>
    <tr>
        <td><b>Website</b></td>
        <td><a href="http://www.beyondblue.org.au ">www.beyondblue.org.au</a></td>
    </tr>
    <tr>
        <td><b>Phone numbers</b></td>
        <td><p><b>Support</b>: <a href="tel:[phone]">1300 22 46 36</a>
        <br><b>Lifeline</b>: <a href="tel:131114">13 11 14</a>
        <br><b>Suicide Callback Service</b>: <a href="tel:[phone]">1300 659 467</a></p>
        <p>If you are in an emergency or at immediate risk of harm to yourself or others, please contact emergency services on <a href="tel:000">Triple Zero (000)</a>.</p></td>
    </tr>
    <tr>
        <td><b>Other services</b></td>
        <td>
        <ul>
            <li><a href="https://www.beyondblue.org.au/get-support/get-immediate-support" target="_blank">Online chat</a></li>
            <li><a href="www.facebook.com/beyondblue" target="_blank">Facebook</a></li>
        </ul>
        </td>
    </tr>
</tbody>
</table>
</div>