CSS: позиционирование не работает

0

Я пытаюсь поставить две коробки друг над другом в нижней части другого div. У меня есть следующий код:

<div style = "height:400px;width:400px;border:1px solid #000;">
    <div style = "position:relative;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
    <div style = "position:relative;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
</div>

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

Теги:

5 ответов

1
Лучший ответ

Вы должны сделать контейнер относительным, и ящики будут абсолютными:

<div style = "height:400px;width:400px;border:1px solid #000; position:relative;">
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>

ИЗМЕНИТЬ ОТВЕТ НА ОПРЕДЕЛЕНИЕ:

<div style = "height:400px;width:400px;border:1px solid #000; position: relative;">
    <div style = "position: absolute;height:100px;border:1px solid #000; bottom: 0;">
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;"></div>
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;">
    </div>
</div>

Поделиться
  • 0
    Это ставит коробки друг на друга
  • 0
    @ user1763032 Это то, что вы просили наложить друг на друга в нижней части
Показать ещё 5 комментариев
1

использовать нижний: 0; во втором div, Затем первый в верхней части другой внизу

<div class="parent">
    <div class="div1">
    </div>
    <div class="div2">
    </div>
</div>

<style>
.parent
{
    height:400px;width:400px;border:1px solid #000;
    position:relative;
}
.div1
{
    position:absolute;
    height:100px;
    width:100px;border:1px solid #000;
}
.div2
{
    position:absolute;
    height:100px;
    width:100px;
    border:1px solid #000;
    bottom:0;
}
</style>
Поделиться
0

У обертывания div должно быть положение: относительное, а два внутренних div должны иметь положение: абсолютное.

<div style = "height:400px;width:400px;border:1px solid #000; position:relative">
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>

Видео с CSS-Tricks

Поделиться
0

1) Ваш контейнер нуждается в позиции 'relative'

2) Ваши поля должны быть "абсолютными", а не "относительными",

Поделиться
0

Вы должны добавить позицию относительно контейнера div и абсолютную в дочернем div. которые приносят div в нижней части. избегайте перекрытия обоих изменений div нижней частью последнего div

<div style = "height:400px;width:400px;border:1px solid #000;position:relative;">
    <div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
    <div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:100px;">
    </div>
</div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню