Dec 2 2011

Позиционирование вложенного элемента относительно родительского

Для абсолютного позиционирования в CSS используется свойство position:absolute; Затем изменяя свойства left, top, right или bottom позиционируется элемент на странице. Но позиционирование происходит относительно окна браузера, и при изменении размеров браузера элемент начинает плавать по странице. Решение проблемы оказалось простым, для родительского элемента необходимо задать свойство position:relative; после чего вложенный элемент позиционируется относительно родительского, а не относительно окна браузера.

Пример:

Код html:

<div id="parrent">
    <div id="child">
    </div>
</div>

Код CSS:

#paretn{position:relative}
#child{position:absolute;top:10px;left:10px}

Автор Georg Spack • HTML & CSS • 2 • Тэги: относительное позиционирование, позиционирование элементов