Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > position: absolute внутри relative

Автор: turing 16.11.2009, 14:03

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

Если внутри блока с position: relative использовать блок с position: absolute, то смещение внутреннего блока с помощью top, bottom etc. задаётся относительно границ родительского.

У меня есть такой кусочек кода:

Код


<div class='material'>
    <div class='photo'>
        <a rel='lightbox' href='img/06_BigIm_ProvenceAntique.jpg'><img src='img/provence.jpg' alt='Veneto' /></a>
    </div>
    <div class='info'>
        <h3>Provence Antique</h3>
        <ul>
            <li><a href='venetian/description.php'>Техническое описание</a></li>
            <li><a href='venetian/application.php'>Техника нанесения</a></li>
        </ul>
        <div class='description'>
            <p>Текст описания. Текст описания. Текст описания. Текст описания. 
            Текст описания. Текст описания. Текст описания. </p>
            <p class='price'>270 руб./м<sup>2</sup></p>
        </div>
    </div>
    <div class='clear'></div>
</div>

И, соответственно, стили:

Код


.material {
    width: 555px;
    height: 275px;
}

.material .photo {
    float: left;
    width: 180px;
    margin-right: 30px;
}

.material .info {
    position: relative;
    width: 345px;
    
}

.material .info .description {
    position: absolute;
    margin-left: 210px;
    /*top: 120px;*/
    width: 100%;
    bottom: 0;
}

Можно http://tohas.info/toys/catalog/venetian.php.

Вопрос такой: почему top: 120px работает как надо, а bottom: 0 — ни в какую?

Автор: blah 16.11.2009, 14:36

Посмотрите где находится нижняя граница блока с position:relative. bottom:0; работает.

Автор: Itsys 16.11.2009, 14:38

Скорее всего, из-за того, что напрямую высота info не задана, а значит равна
высоте

Код


        <h3>Provence Antique</h3>
        <ul>
            <li><a href='venetian/description.php'>Техническое описание</a></li>
            <li><a href='venetian/application.php'>Техника нанесения</a></li>
        </ul>

вот он по низу этого и выравнивает

Автор: turing 16.11.2009, 17:59

Не посчитал, что высота родителя будет равна высоте .info из-за того, что .description абсолютен, а .photo флоатится.
Спасибо, ребята, вывели из заблуждения.

Задал высоту info{height:100%}, запахало как надо.