Div не плавает над другим div

Question

У меня есть два div, которые у меня есть. Один - это фон. Другой - некоторый текст.

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

Вот скрипку, так что вы можете получить представление о том: http://jsfiddle.net/d78sdjm4/2/

зеленый (.contact_text), как предполагается, в центре или, по крайней мере, на верхней части красной DIV (.mebg). Затем черный (.footer) должен быть расположен непосредственно под ними.

HTML:

<div class="contactwrapper"> 
    <div class="contact"> 
    <p>please work</p> 
    </div> 
    <div class="mebg"> 
     <img src="images/contactnew.png" /> 
    </div> 
</div> 
<!-----------------------------------------------------------------------------------end of contact------------------------------------------------------------------------------------------> 
<div class="footer"> 
<img src="images/footer.png" width="239" height="15" /> 
</div><!-----------------------------------------------------------------------------------end of footer-------------------------------------------------------------------------------------------> 

CSS:

.contactwrapper{ 
    width:100%; 
    position:relative; 
} 
.contact{ 
    float:left; 
    background:#0F3; 
} 
.mebg{ 
    float:left; 
    width:100%; 
    background:#900; 
} 
mebg img{ 
    width:30%; 
} 
.footer{ 
    z-index: 1; 
    height: 30px; 
    background-color: #ffffff; 
} 

Answer 1

Вот скрипку https://jsfiddle.net/rphsjt1q/1/

.contactwrapper{ 
 
\t width:100%; 
 
\t position:relative; 
 
    overflow:auto; 
 
} 
 
.contact{ 
 
\t position:absolute; 
 
\t background:#0F3; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    top:0; 
 
    width:100px; 
 
    height:100px; 
 
    margin:auto; 
 
    text-align:center; 
 
    z-index:1; 
 
    
 
} 
 
.mebg{ 
 
\t float:left; 
 
\t width:100%; 
 
\t background:#900; 
 
    height:200px; 
 
} 
 
mebg img{ 
 
\t width:30%; 
 
} 
 
.footer{ 
 
\t z-index: 1; 
 
\t height: 30px; 
 
\t background-color: #000; 
 
    width:100%; 
 
    display:block; 
 
}

<div class="contactwrapper"> 
 
    <div class="contact"> 
 
    <p>please work</p> 
 
    </div> 
 
    <div class="mebg"> 
 
    \t <img src="images/contactnew.png" /> 
 
    </div> 
 
</div> 
 
<!-----------------------------------------------------------------------------------end of contact------------------------------------------------------------------------------------------> 
 
<div class="footer"> 
 
<img src="images/footer.png" width="239" height="15" /> 
 
</div><!-----------------------------------------------------------------------------------end of footer------------------------------------------------------------------------------------------->

Answer 2

Вы можете добавить clear: both; к .footer { }, чтобы получить черную полосу под двумя другими. Также плавающий элемент с шириной 100% обычно не дает желаемых результатов. Он может быть плавающим, но поскольку ширина составляет 100%, все равно все толкается.

Answer 3

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

.contactwrapper{ 
    width:100%; 
    position:relative; 
} 
.contact{ 
    float:left; 
    background:#0F3; 
    position: absolute; /* .contact needs absolute positioning */ 
} 
.mebg{ 
    float:left; 
    width:100%; 
    background:#900; 
    height:200px; 
} 
mebg img{ 
    width:30%; 
} 
.footer{ 
    z-index: 1; 
    height: 30px; 
    clear: both;  /* clear: both will bring the footer below the other divs */ 
    background-color: #000; 
} 

Answer 4

Вы можете перемещать комментарий DIV внутри красный DIV mebg:

<div class="contactwrapper"> 
    <div class="mebg"> 
     <img src="images/contactnew.png" /> 
     <div class="contact"> 
      <p>please work</p> 
     </div> 
    </div> 
</div> 
<!-----------------------------------------------------------------------------------end of contact------------------------------------------------------------------------------------------> 
<div class="footer"> 
<img src="images/footer.png" width="239" height="15" /> 
</div><!-----------------------------------------------------------------------------------end of footer-------------------------------------------------------------------------------------------> 

Добавить в clear:both, как описано в другом ответе, и это должно работать (или по крайней мере выглядит), как вы хотите.

см. Это jsfiddle для примера.

EDIT: Я нашел эту ссылку на CSS positioning, чтобы быть полезной. Я думаю, что это объясняет вещи довольно четко.

Answer 5

Поскольку вы уже установки position как relative для contactwrapper, почему бы не отказаться от float с и просто использовать absolute позиционирование?

Ниже приведен пример с кодом в качестве базы. Обратите внимание, что я удалил много стилей, которые были лишними для примера.

.contactwrapper { 
 
    position: relative; 
 
} 
 
.contact { 
 
    background: #0F3; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.mebg { 
 
    background: #900; 
 
    height: 200px; 
 
} 
 
.footer { 
 
    height: 30px; 
 
    background-color: #000; 
 
} 
 

 
/* To look pretty: Hide overflow of the stock images */ 
 
.mebg, 
 
.footer { 
 
    overflow: hidden; 
 
}

<div class="contactwrapper"> 
 
    <div class="contact"> 
 
    <p>please work</p> 
 
    </div> 
 
    <div class="mebg"> 
 
    <img src="http://www.lorempixel.com/700/200" /> 
 
    </div> 
 
</div> 
 
<!-----------------------------------------------------------------------------------end of contact------------------------------------------------------------------------------------------> 
 
<div class="footer"> 
 
    <img src="http://www.lorempixel.com/700/15" /> 
 
</div> 
 
<!-----------------------------------------------------------------------------------end of footer------------------------------------------------------------------------------------------->