Позиция на границе снизу

Question

Im пытается создать поляризующе выглядящую фоторамку, которая отзывчива. Проблема в том, что заголовок не будет придерживаться нижней границы, он просто плавает над изображением.

Если im использует пиксели вместо процента, он работает, но не по-другому. Любые идеи?

the fiddle

HTML

<div class="imageContainer"> 
    <img src="http://photogallery.indiatimes.com/beauty-pageants/miss-india/rochelle-maria-raos-photo-shoot/photo/16651703/Miss-India-International-Rochelle-Maria-Rao-during-her-photo-shoot-.jpg" /> 
    <p> Title</p> 
</div> 

CSS

.imageContainer { 
    position: relative; 
    width: 25%; 
    padding-bottom: 25%; 
    float: left; 
    height: 0; 
    margin-right:10px; 
    border:10px solid #e3e3e3; 
    border-bottom:30px solid #e3e3e3; 
} 

.imageContainer img { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
} 
.imageContainer p{ 
    position:absolute; 

} 

Answer 1

Что вы делаете г неверен, вы используете толстые границы вокруг изображения, которое предотвращающие внутренний текст течь через него, для того, чтобы добиться того, что вам нужно использовать отрицательное bottom значение для вашего title

.imageContainer p{ 
    position:absolute; 
    bottom: -40px; 
} 

Demo

Вместо этого подхода я хотел бы предложить вам использовать display: inline-block;li элементов с вложенной div & img тегом, div с фиксированной высотой и img с фиксированным minheight и width с указанным элементом заголовка absolute по адресу bottom 0

Answer 2

Добавьте к этому .imageContainer p декларации:

bottom: -40px;