Текст над плавающим элементом списка изображений с использованием HTML и CSS?

Я хочу иметь список (ul/li) элементов, плавающих влево. Каждый элемент должен содержать изображение (img tag, no css background.) Я хочу, чтобы текст отображался над этими изображениями.Текст над плавающим элементом списка изображений с использованием HTML и CSS?

До сих пор в моей текущей тестовой версии этот текст отображается возле левой границы страницы, а не изображения.

Вот мой текущий код тест

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    <!-- I know that classes like list and listItem may seem redundant with tags but classes will be useful in final context. --> .list { 
 
     list-style-type: none 
 
    } 
 
    .list .listItem { 
 
     float: left; 
 
     display: inline; 
 
     margin: 0 5px 0 5px 
 
    } 
 
    .listItem img { 
 
     z-index: 3 
 
    } 
 
    .listItem .title { 
 
     position: absolute; 
 
     left: 0; 
 
     width: 100%; 
 
     color: #f00; 
 
     margin: 5px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <ul class="list"> 
 
    <li class="listItem"> 
 
     <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" /> 
 
     <span class="title">Test text, test text</span> 
 
    </li> 
 
    <li class="listItem"> 
 
     <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" /> 
 
     <span class="title">Test text, test text</span> 
 
    </li> 
 
    <li class="listItem"> 
 
     <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" /> 
 
     <span class="title">Test text, test text</span> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

А вот JS скрипку: https://jsfiddle.net/24u81rgn/2/

источник

2016-11-08 TTT

Я думаю, вы забыли поставить position: relative к listItem и top:0 для title.

Дайте мне знать ваши отзывы, приветствия!

.list { 
 
    list-style-type: none 
 
} 
 
.list .listItem { 
 
    float: left; 
 
    display: inline; 
 
    margin: 0 5px 0 5px; 
 
    position:relative; 
 
} 
 
.listItem img { 
 
    z-index: 3; 
 
} 
 
.listItem .title { 
 
    position: absolute; 
 
    left: 0; 
 
    top:0; 
 
    width: 100%; 
 
    color: #f00; 
 
    margin: 5px; 
 
}

<body> 
 
    <ul class="list"> 
 
    <li class="listItem"> 
 
     <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" /> 
 
     <span class="title">Test text, test text</span> 
 
    </li> 
 
    <li class="listItem"> 
 
     <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" /> 
 
     <span class="title">Test text, test text</span> 
 
    </li> 
 
    <li class="listItem"> 
 
     <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" /> 
 
     <span class="title">Test text, test text</span> 
 
    </li> 
 
    </ul> 
 
</body>

источник

2016-11-08 15:54:15 kukkuz

"положение: по отношению к ListItem" решил. top: 0 не представляется необходимым. Спасибо. – TTT

Текст над плавающим элементом списка изображений с использованием HTML и CSS?

ответ

Смежные вопросы