текст поверх изображения CSS

Question

text comes over this stack image any idea how to do it

ДИВ имеет текст 3-4 линий, изображения и пагинацией на левой стороне нижней части. что-то вроде этого.

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

.image { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
    } 

div { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
    } 

Answer 1

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

div { 
 
    background:url(https://i.stack.imgur.com/EinaJ.png) top center; 
 
    width:620px; 
 
    margin:auto; 
 
    padding:40px 40px 30px; 
 
    height:790px; 
 
    position:relative; 
 
    display:flex; 
 
    flex-flow:column; 
 
    justify-content:center; 
 
} 
 
img, p, nav { 
 
    padding:5px; 
 
    margin:0; 
 
    /* see me */ 
 
    background:pink 
 
} 
 
img { 
 
    margin:auto auto 0; 
 
} 
 
nav { 
 
    bottom:30px; 
 
    right:45px; 
 
    margin:auto 0 0; 
 
    border-radius:0 0 0.25em 0.25em ; 
 
    /* see me */ 
 
    background:rgba(0,0,0,0.2); 
 
    text-align:center; 
 
    word-spacing:0.5em;/* better use margin on links, ... */ 
 
} 
 
body { 
 
    background:#777; 
 
}

<div> 
 
    <img src="http://lorempixel.com/200/150"/> 
 
    <p>here is</p> 
 
    <p>some line</p> 
 
    <p>of</p> 
 
    <p>text</p> 
 
    <nav>navigation : <a href> link</a> <a href> link</a> <a href> link</a></nav> 
 
</div>

Ressource среди других, которые могут быть полезны: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Я думаю, что вы забыли изменить цвет # 000 дела. или может проблема г-индекса

div { 
    color:Black; 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
    z-index:222; 

    } 

Answer 3

Вы должны сделать контейнер DIV с «положение: относительная;», затем включить изображение внутри этой DIV, а также включать в себя текст «позицию: абсолютная;»;

, например:

#container { 
    height: 100px; 
    width: 100px; 
    position: relative; 
} 

#container img { 
    display: block; 
    width: 100px; 
    height: 100px; 
} 

#container span { 
    display: block; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 

и ваш HTML:

<div id="container"> 
    <img src="" alt="" /> 
    <span>Hello World</span> 
</div>