Cant get wrapper div right

Question

Я хочу, чтобы div с текстом в нем. В этом div я также хочу div, который соответствует той же позиции и пропорции. Я нашел несколько вещей в stackoverflow, но как только на вещи разные, это не работает для меня.

Прямо сейчас, я больше не вижу текст. Зачем? Было бы здорово, если бы решение не повлияло на css для '#container'.

HTML:

<div id="container"> 
    <p>Somt text to screw with me</p> 
    <div class="background-img"></div> 
</div> 

CSS:

#container { 
    position: fixed; 
    left: 10px; 
    top: 30px; 
    width: 100px; 
    height: 50px; 
    background: red; 
} 

p { 
    color: blue; 
} 


.background-img { 
    position: absolute; 
    background-size: cover; 
    background-repeat: none; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: url(http://lorempixel.com/420/255);  
} 

для скрипачей: https://jsfiddle.net/clankill3r/8kaLj2su/

Answer 1

Добавить z-index: -1 на фоновое изображение.

https://jsfiddle.net/8kaLj2su/2/

Answer 2

p { 
    color: blue; 
z-index:1; 
position:relative; 
} 

В основном Z-индекс: 1 подтолкнет текст сверху и положение необходимо для г-индекс для работы в большинстве случаев. Я бы не предложил -1 как incase, если у вас есть текст для этого div, он также может быть скрыт.

Answer 3

p { 
    color: blue; 
    z-index: 9999; 
} 

Answer 4

Правильный способ сделать это было бы Не использовать Z-индекс на всех

Изменение логического порядка ваших элементов:

<div id="container"> 
    <div class="background-img"></div> 
    <p>Somt text to screw with me</p> 
</div> 

И чем просто установить ваш p к относительна:

#container { 
 
    position: fixed; 
 
    left: 10px; 
 
    top: 30px; 
 
    width: 100px; 
 
    height: 50px; 
 
    background: red; 
 
} 
 

 
p { 
 
    color: blue; 
 
    position:relative; 
 
} 
 

 
.background-img { 
 
    position: absolute; 
 
    background: url(http://lorempixel.com/420/255) 50%/cover; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    <div class="background-img"></div> 
 
    <p>Somt text to screw with me</p> 
 
</div>

Answer 5

Если вы хотите увидеть свое фоновое изображение с текстом:

https://jsfiddle.net/xeyw0hvc/

Код:

#container { 
position: fixed; 
left: 10px; 
top: 30px; 
width: 100px; 
height: 50px; 
background: red; 
z-index:10; 
} 

p { 
color: blue; 
} 


.background-img { 
position: absolute; 
background-size: cover; 
background-repeat: none; 
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
background: url('http://lorempixel.com/420/255'); 
z-index:-1;  
} 

Answer 6

Используйте z-индекс, чтобы выбрать, какой элемент перекрывает другой.

Рабочий пример: (JSFiddle)

#container { 
 
    position: fixed; 
 
    left: 10px; 
 
    top: 30px; 
 
    width: 100px; 
 
    height: 50px; 
 
    background: red; 
 
} 
 

 
p { 
 
    color: blue; 
 
    z-index:2; 
 
    position:relative; 
 
} 
 

 

 
.background-img { 
 
    position: absolute; 
 
    background-size: cover; 
 
    background-repeat: none; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: url(http://lorempixel.com/420/255); 
 
    z-index:1; 
 
}

<div id="container"> 
 
    <p>Somt text to screw with me</p> 
 
    <div class="background-img"></div> 
 
</div>

Answer 7

Использование Z-индекс, как и другие предложили в порядке. Но я обнаружил, что z-индексирование немного ошибочно, особенно в старых браузерах, таких как более старые версии IE. Я бы поступил иначе. Измените порядок разметки, сделайте положение родительского контейнера: относительным, затем сделайте положение обоих дочерних элементов: абсолютным. Таким образом, вы избегаете использования z-индекса.не

Как так: https://jsfiddle.net/4x5nkwgb/

HTML

<div id="container"> 
    <div class="background-img"></div> 
    <p>Somt text to screw with me</p> 
</div> 

CSS

#container { 
    position: relative; 
    left: 10px; 
    top: 30px; 
    width: 100px; 
    height: 50px; 
    background: red; 
} 

p { 
    color: blue; 
    position:absolute; 
    top:0; 
    left:0; 
    display:block; 
} 


.background-img { 
    position: absolute; 
    background-size: cover; 
    background-repeat: none; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: url(http://lorempixel.com/420/255);  
}