CSS相对定位，使所有子项相对于父项

Question

请考虑以下带有样式的HTML。

<div style="border: 1px solid;height: 600px;">
    <button id="create_new_estimate" style="position:relative;top:10px;left:10px;">
        Create New Estimate
    </button>
    <table style="position:relative;top:10px;left:300px;">
        <tr>
            <td>
                cell 1
            </td>
        </tr>
        <tr>
            <td>
                cell 2
            </td>
        </tr>
    </table>
</div>

你可以在这里看到。

我希望能够将这两个元素并排放置。最终，我将在这个div中添加更多的元素。我认为position:relative可以让我给每个元素一个top和left样式的属性，使其相对于父div有一个位置。然而，正如您在本例中看到的，这两个元素都有top:10px;，所以我希望它们挨着，但它们并不挨着。

你知道我可以使用什么样式吗，所以我可以简单地给每个元素一个top和left属性，将它们定位在父元素中。谢谢

Answer 1

给你一个outter wrapdiv"position:relative；"并将你当前的"position:relative；"更改为"position:absolute；"

在"position:absolute"旁边使用"top"one_answers"left"属性，并将"position:relative"视为锚点。如果您没有带有"position:relative"的父元素，则浏览器窗口将成为您的锚点。