MyTetra Share
Делитесь знаниями!
Абсолютное позиционирование элемента внутри родительского div
Время создания: 08.04.2013 23:03
Раздел: Компьютер - Программирование - HTML и CSS
Запись: xintrea/mytetra_syncro/master/base/13654477816crz3yo8j0/text.html на raw.github.com

Абсолютное позиционирование элемента внутри родительского



В статье "Абсолютное позиционирование элементов (HTML + CSS)" рассматривался аналогичный вопрос, но там говорилось о позиционировании относительно рабочей области браузера. Элементу можно задать положение и внутри родительского элемента, что бывает очень полезным.


Предлагаю рассмотреть следующую реализацию: блок фиксированного размера, внутри которого расположен блок, прижатый к нижнему краю:


#parent

{

position: relative;

background: lime;

width: 200px;

height: 200px;

}


#block

{

position: absolute;

background: blue;

bottom: 0;

left: 0;

right: 0;

height: 30px;

}


<div id="parent">

<div id="block">Hello, world</div>

</div>


Родительскому элементу задается CSS-стиль position со значением relative, это позволяет позиционировать дочерние элементы относительно родительского.


Внутри блок прижимается к нижнему краю при помощи CSS-стилей left, right, bottom.

Так же в этом разделе:
 
MyTetra Share v.0.59
Яндекс индекс цитирования