Поплавок div на дно содержащего div

Question

Я хотел бы указать id="des" на его нижнюю часть, содержащую div. Я думал, что использование position:absolute будет работать, но оно скорее плавает за пределами контейнера.

#links { 
 
    border: 1px solid black; 
 
    width: 400px; 
 
    height: 400px; 
 
    box-shadow: 1px 1px 1 black; 
 
    overflow: auto; 
 
} 
 
img { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#des { 
 
    border: 1px solid; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div id="links"> 
 
    <a href="/"> 
 
    <img src="http://icons.iconarchive.com/icons/fasticon/social-bookmark/256/Feeds-icon.png" /> 
 
    <div id="des">FEEDS 
 
     <br/>get latest updates here</div> 
 
    </a> 
 
</div>

Answer 1

просто добавить position:relative в #links

подробнее о позиции here

#links { 
 
    border: 1px solid black; 
 
    width: 400px; 
 
    height: 400px; 
 
    box-shadow: 1px 1px 1 black; 
 
    overflow: auto; 
 
    position: relative; 
 
} 
 
img { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#des { 
 
    border: 1px solid; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div id="links"> 
 
    <a href="/"> 
 
    <img src="http://icons.iconarchive.com/icons/fasticon/social-bookmark/256/Feeds-icon.png" /> 
 
    <div id="des">FEEDS 
 
     <br/>get latest updates here</div> 
 
    </a> 
 
</div>

Answer 2

Абсолютно позиционированные элементы расположены относительно их ближайшего расположенного предка, в вашем корпусе - тела. Установка position:relative на #links будет, однако, даст вам поведение вы после:

#links { 
 
    border: 1px solid black; 
 
    width: 400px; 
 
    height: 400px; 
 
    box-shadow: 1px 1px 1 black; 
 
    overflow: auto; 
 
    position:relative; 
 
} 
 
img { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#des { 
 
    border: 1px solid; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div id="links"> 
 
    <a href="/"> 
 
    <img src="http://icons.iconarchive.com/icons/fasticon/social-bookmark/256/Feeds-icon.png" /> 
 
    <div id="des">FEEDS 
 
     <br/>get latest updates here</div> 
 
    </a> 
 
</div>

Смотрите https://developer.mozilla.org/en-US/docs/Web/CSS/position для получения дополнительной информации о позиции собственности.

Answer 3

#links { 
    border: 1px solid black; 
    width: 400px; 
    height: 400px; 
    box-shadow: 1px 1px 1 black; 
    overflow: auto; 
    position: relative; 
} 

DEMO

Answer 4

как добавить позицию: по отношению к .DES, если их, но сделать свой height:auto на #links, если вы не хотите, чтобы переполнить видеть codepen