bottom... с position absolut и relative

[Arhidiablo]

Доброго времени госопда, открыл простой урок по bottom, все очень банально, есть 2 div'a, 1ый является контейнером с фиксированной высотой и шириной 200px, в нем находится еще один div, с позицией relative и bottom суть такова если задаю абсолютное позиционирование (absolute) то как и положенно вложенный div относительно окна браузера делает отступ, если использую relative как-то не правильно работает, не как в уроке написанно, подскажите в чем моя ошибка?

HTML

<div class="di_img">
		  <div class="di_img_cont">
		  </div>
</div>

CSS

.di_img { margin:100px; width:200px; height:200px; background:#F00;}
.di_img_cont { background:#0F0; width:50px; position:relative; height:50px;bottom:2px;}

Пример: http://jsfiddle.net/8VS7s/3/

Такое ощущение, что контейнер имеет height 0..

[Switch74]

у меня вроде все правильно отображается, что вас не устраивает в отображении?

[Arhidiablo]

  On 8/20/2013 at 2:56 AM, Switch74 said:

у меня вроде все правильно отображается, что вас не устраивает в отображении?

У меня прописано bottom 2px. Если следовать описанию http://htmlbook.ru/css/bottom (рис. 2) он должен притянуть внутренний div к низу и отодвинуть его на 2 пикселя вверх, вот как это выглядит у меня:

[Switch74]

ага, значит вам нужно relative превратить в absolute

тогда у вашего родителя не хватает position например relative

без него все абсолютно позиционированные объекты будут позиционироваться относительно страницы, а не родителя

[Arhidiablo]

мм вот сделал только ничего не изменилось =(

http://jsfiddle.net/8VS7s/4/

HTML

<div class="di_img">
<div class="di_img_cont">
    </div>
</div>

CSS

.di_img { margin:100px; width:200px; height:200px; background:#F00;position:relative;}
.di_img_cont { background:#0F0; width:50px; position:relative; height:50px;bottom:2px;}

так получается? но все равно как бы я не позиционироавл контейнер толку 0, (случай с absolute не рассматриваем т.к. он то работает однако мне нужно позиционировать относительно контейнера а не относительно окна браузера =). )

[Switch74]

хм.. в вашем случае position:relative это означает, что объект будет позиционироваться относительно своего местоположения, bottom:2px поднял его на 2px все верно, а то что вы нарисовали, чтобы блок был прижат к нижней части контейнера, то нужен только absolute

с relative возможен такой вариант, но там есть несколько своих нюансов http://jsfiddle.net/8VS7s/5/

[Arhidiablo]

я - дубина, нужно было тыкать меня носом до потери крови в самый 1ый пример =) мне нужно было попробовать этот вариант, а я не совсем вчитавшись "воевал с ветряными мельницами"

  On 8/20/2013 at 5:28 AM, Switch74 said:

ага, значит вам нужно relative превратить в absolute

тогда у вашего родителя не хватает position например relative

без него все абсолютно позиционированные объекты будут позиционироваться относительно страницы, а не родителя

Колдунство работает =)

http://jsfiddle.net/8VS7s/6/

Низкий поклон Switch74'у за терпение =) и респект! =)