Как точно расположить элемент внутри другого элемента

Пн, Апр 8, 2013

CSS-Приемы, Верстка

Для этого нам послужит свойство position со значением . Однако скажите вы, значения top, right, bottom, left при значении position:absolute будут указываться относительно всего окна сайта.

Это верно, но чтобы значения работали относительно родительского элемента (внутри которого располагается объект), необходимо родительскому элементу присвоить значение position:relative

Это кажется простым, однако многие начинающие верстальщики сталкиваются с подобными проблемами.

Подобная техника позволяет приклеить к нужному месту вложенный объект.

Поясним на примере.

Родительский элемент

Позиционируемый элемент

<div style=»width:300px; height:150px; border:1px solid red; position:relative«>
Родительский элемент
<div style=»width:150px; height:100px; border:1px solid red; position:absolute; top:30px; left:40px;«>Позиционируемый элемент</div>
</div>

Позиционируемый элемент, в этом примере будет сдвинут относительно родительского на 30 точек сверху и на 40 точек влево.

Стоит отметить, что свойство position применимо не ко всем html тегам (элементам). Например это считается невалидным для тега td. И хотя для этого тега, на текущий момент, свойство position работает во всех современных браузерах, кроме строгого Mozilla Firefox (FF), вместо тега td свойство position следует указывать тегу table.

Comments are closed.