(CSS) Как позиционировать текст (с цветом фона) над тегом <img>без абсолютного позиционирования

Question

Как следует из названия

мой код примерно такой:

<div class=container> <img/> <div>some text with line one, line two , line three </div> </div>

контейнер должен иметь переполнение: скрытый, и мой текст должен быть в несколько строк, поэтому мне нужно, чтобы только небольшая часть моего текста отображалась в нижней части контейнера, поэтому при наведении курсора пользователя отображается полный текст.

Я хочу расположить текст поверх img БЕЗ абсолютного позиционирования. Я пробовал отрицательные поля, но текст там не будет иметь цвет BG. Также попробовал Относительный поз. => отлично работает, но не случайно на IE.

вот изображение того, что я хочу

Answer 1

Не вижу смысла не использовать position: absolute.

См .: http://jsfiddle.net/NeaR4/

CSS:

.container {
    border: 2px dashed #444;
    float: left;
    position: relative
}
.container img {
    display: block
}
.container > div {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 14px;
    background: #000;
    background: rgba(0,0,0,0.7);
    color: #fff;
    overflow: hidden;
    font: bold 14px Arial, sans-serif;
    padding: 5px;
}
.container:hover > div {
    height: auto
}

HTML:

<div class="container">
    <img src="http://dummyimage.com/230x180/f0f/fff" />
    <div>some text with line oneeee, line twoooooooo ooooooo , line three</div>
</div>

Answer 2

position:relative решает вашу проблему