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我就可以给每个元素赋一个topand leftstyle属性,使它相对于父div有一个位置.但是正如你在这个例子中看到的那样,两个元素都有,top:10px;所以我希望它们彼此相邻,但它们并不是彼此相邻的.

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

Answer 1

给你外包裹div一个"位置:亲戚;" 并改变你当前的"位置:相对;" 到"位置:绝对;"

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