Я пытаюсь добавить два изображения (ul, li) в конце DIV. Я использую положение ABSOLUTE, RELATIVE и left: 0, bottom: 0, и он делает это, но он не остается на div.
Изображения появляются в "MainDiv", а не в "контейнере".
#MainDiv{
background:url(../img/background.jpg) no-repeat;
background-size:cover;
width:100%;
height:600px;
}
#container{
width:980px;
height:600px;
margin:0 auto;
position:relative;
}
#list{
width:260px;
height:40px;
position:absolute;
left:0;
bottom:0;
}
#list li{
width:130px;
height:40px;
border:1px solid white;
}
<div id="MainDiv">
<div id="container">
<ul id="list">
<li id="image1">Example1</li>
<li id="image2">Example2</li>
</ul>
</div>
</div>
Абсолютно позиционированный элемент позиционируется относительно соответствующих краев его родительского... из его внешнего вида у вашего контейнера нет набора высоты...
Список правильно расположен в нижней части контейнера div, но нет ничего, что придает контейнеру div любую высоту. Поскольку высота контейнера div равна нулю, список помещается внизу, где находится контейнер div.
Чтобы поместить список внутри контейнера div, вам нужно дать контейнеру div высоту. Либо указывая стиль высоты, либо помещая что-то внутри, которое не является абсолютно позиционированным или плавающим.
С обновленным кодом, который имеет высоту для контейнера div, список помещается внизу.
Попробуйте установить вертикальное выравнивание вниз.
<style>
#MainDiv{
background:url(../img/background.jpg) no-repeat;
background-size:cover;
}
#container{
width:980px;
margin:0 auto;
position:relative;
}
#list{
width:260px;
height:40px;
position:absolute;
left:0;
bottom:0;
}
#list li{
width:130px;
height:40px;
border:1px solid white;
vertical-align:bottom;
}
</style>
<body>
<div id="MainDiv">
<div id="container">
<ul id="list">
<li id="image1>Example1</li>
<li id="image2>Example2</li>
</ul>
</div>
</div>
Когда вы добавляете высоту в контейнер, она перемещает ваш <ul>
в нижнюю часть div. Фактически, он всегда находится в нижней части div, но поскольку высота div равна 0, это не похоже на то, что оно находится внизу.
#container{
width:980px;
margin:0 auto;
position:relative;
height: 800px;
}
<li>
технически ваш div имеет рост 0px. Попробуйте установить высоту к нему.