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>

你可以看到它here。

我希望能够将这两个元素并排放置。最终我将在这个div中添加更多元素。我认为position:relative允许我只为每个元素赋予top和left样式属性，以便为其提供相对于父div的位置。但是正如您在本示例中所看到的，两个元素都有top:10px;，所以我希望它们彼此相邻，但它们并不是彼此相邻的。

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

Answer 1

给你exter wrap div一个“position：relative;”并改变你当前的“位置：相对;”到“位置：绝对;”

在“position：absolute”旁边使用“top”和“left”属性，并将“position：relative”视为您的锚点。你没有“position：relative”的父元素，那么浏览器窗口就成了你的锚。