Я пытаюсь поставить две коробки друг над другом в нижней части другого 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>
Проблема в том, что ящики находятся в верхней части их контейнера не внизу. Помоги пожалуйста.
Вы должны сделать контейнер относительным, и ящики будут абсолютными:
<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; во втором 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>
У обертывания 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>
1) Ваш контейнер нуждается в позиции 'relative'
2) Ваши поля должны быть "абсолютными", а не "относительными",
Вы должны добавить позицию относительно контейнера 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>