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

Дайте вам внешнюю упаковку div "позиция: относительная;"и изменить текущую позицию: относительная;to "position: absolute;"

Используйте атрибуты "top" и "left" рядом с "position: absolute" и думайте о "position :lative" как о якоре.Если у вас нет родительского элемента с «position: относительным», то окно браузера становится вашим якорем.