Как избежать разрыва при использовании z-index в CSS?

Question

У меня есть следующий HTML-код:

  <div class="outer_container">
     <div id="imgContainer">
       <img src="/some/image" />              
     </div>

     <div id="slogan">
       <span class="quote">Some text here</span>
     </div>

     <div id="footer" class="gray_top_border">
       Some text here
     </div>
  </div>

А это мой CSS:

.outer_container {
  background-color:#FFFFFF;
  margin:0 auto;
  width:960px;
}

#slogan {
  font-size: 3em;
  position: relative;
  z-index: 999;
  bottom: 50px;
  left: 50px;
}

#footer {
  border-top:1px solid #B5B5B5;
  min-height:50px;
  padding:10px;
}

Используя этот код, я получаю разрыв в 3em между изображением и нижним колонтитулом.
Если я изменю положение с relative на absolute, проблема с пропуском исчезнет. Но тогда верхняя / левая позиция относится к окну браузера, а не к контейнеру DIV.

Как я могу разместить текст поверх изображения, не создавая этот пробел?

Answer 1

Это делает это:

#slogan {
  font-size: 3em;
  position: relative;
  height: 0;
  overflow: visible;
  z-index: 999;
  bottom: 50px;
  left: 50px;
}

Answer 2

«Position: родственник» по-прежнему резервирует область, в которой находился бы текст. Это означает, что время от времени могут возникать странные проблемы с отступами / полями.

«позиция: абсолютная» не резервирует область. Я рекомендую просто использовать это вместо того, чтобы хакать с относительным.

http://www.w3schools.com/css/css_positioning.asp

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

" Элемент абсолютной позиции позиционируется относительно первого родительского элемента, который имеет позицию, отличную от статической. Если такой элемент не найден, содержащийся блок имеет вид. "

Answer 3

Можете ли вы попробовать ниже CSS

 #slogan {
      font-size: 3em;
      position: relative;
      z-index: 999;
      margin-top:-20px;

    }

    #footer {
position:absolute;
bottom:10px

      border-top:1px solid #B5B5B5;
      min-height:50px;
      padding:10px;
    }