VPF::position: absolute внутри relative - Форум программистов

turing

Дата 16.11.2009, 14:03 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 27
Регистрация: 5.11.2008

Репутация: нет
Всего: нет

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

Если внутри блока с 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;
}

Можно посмотреть вживую.

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

blah

Дата 16.11.2009, 14:36 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

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

Itsys

Дата 16.11.2009, 14:38 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34

Скорее всего, из-за того, что напрямую высота 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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 27
Регистрация: 5.11.2008

Репутация: нет
Всего: нет

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

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

Это сообщение отредактировал(а) turing - 16.11.2009, 18:10

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »