Позиция Div внутри DIV

Question

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

.jumbotron { 
    padding: 30px 15px; 
    margin-bottom: 30px; 
    color: inherit; 
    overflow: hidden; 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
     background: rgba(255, 255, 255, 0.35); 
    border-radius: 3px; 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
    z-index: 2; 

} 

.background-image { 
     padding: 30px 15px; 
    margin-bottom: 30px; 
    color: inherit; 
    overflow: hidden; 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 

    background-image: url(http://localhost:2359/images/6H.jpg); 
    background-size: cover; 
    display: block; 
    filter: blur(5px); 
    -webkit-filter: blur(5px); 
    height: 800px; 
    left: 0; 
    right: 0; 
    z-index: 1; 
} 

<div class=" hero-spacer"> 
    <div class="background-image"></div> 
     <header class="jumbotron hero-spacer"> 

      <h1>Welcome</h1> 
      <p>TEXT 
</p> 

     </header> 
</div> 

Это результат, который я получаю:

Мой вопрос, как я могу поместить текст под изображение, на него, а не под него? Я не знаю, что нужно делать.

Answer 1

сделать как

position: relative; 

и настроить JumboTron с чем-то вроде

top: -100px; 

и

left: 100px; 

атрибутов.

http://jsfiddle.net/m4dpzf8v/2/

Answer 2

Попытка использовать абсолютное положение в CSS для внутренних contaners:

.jumbotron, .background-image { 
    position: absolute; 
} 

и взаимное расположение для наружного контейнера:

.hero-spacer { 
    position: relative; 
} 

Пример: http://jsfiddle.net/q3a1w273/1/

Answer 3

Ниже должен сортировать вас.

---

.hero-spacer { 
 
    position: relative; 
 
} 
 
.jumbotron { 
 
    padding: 30px 15px; 
 
    color: inherit; 
 
    overflow: hidden; 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background: rgba(255, 255, 255, 0.35); 
 
    border-radius: 3px; 
 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
 
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
 
    z-index: 2; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    right: 0px; 
 
} 
 
.background-image { 
 
    padding: 30px 15px; 
 
    margin-bottom: 30px; 
 
    color: inherit; 
 
    overflow: hidden; 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-image: url(http://localhost:2359/images/6H.jpg); 
 
    background-size: cover; 
 
    display: block; 
 
    filter: blur(5px); 
 
    -webkit-filter: blur(5px); 
 
    height: 800px; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 
}

<div class=" hero-spacer"> 
 
    <div class="background-image"></div> 
 
    <header class="jumbotron"> 
 
    <h1>Welcome</h1> 
 
    <p>TEXT</p> 
 
    </header> 
 
</div>