Позиция div над другим контентом

Question

Я использую bootstrap, и ширина страницы НЕ исправлена.

Я хотел бы, чтобы отобразить контактную форму DIV (серый ящик ниже), как это:

Так серая форма контакта является своего рода парит над синим и белым дивы.

Спасибо!

Вот что я пытаюсь сделать: http://jsfiddle.net/w69j4xam/

<div class="header"> 
Header 
</div> 
<div class="content"> 
    <div class="bluediv"> 
     Some text here 
    </div> 
    <div class="whitediv"> 
     Some more text here 
    </div> 
    <div class="contactform"> 
     Contact Form<br/><br/><br/><br/> 
    </div> 
</div> 

body{ 
    padding: 20px; 
} 
.header{ 
    height: 50px; 
    background-color: green; 
} 

.content{} 

.bluediv{ 
    height: 150px; 
    background-color: #AFEEEE; 
} 

.whitediv{ 
    height: 180px; 
    background-color: #FFF; 
} 

.contactform{ 
    background-color: grey; 
    width: 100px; 
    position: absolute; 
} 

Answer 1

Что касается вашего примера jfiddle, все, что вам нужно добавить, это право и верх.

.contactform{ 
    right:50px; 
    top:100px; 
    background-color: grey; 
    width: 100px; 
    position: absolute; 
} 

http://jsfiddle.net/w69j4xam/2/

Answer 2

Установите внешний DIV однако вы хотите, а затем расположить внутренние дивы с помощью абсолюта. Они все встанут.

<style type="text/css"> 
.inner { 
    position: absolute; 
} 
</style> 

<div class="outer"> 
    <div class="inner">1</div> 
    <div class="inner">2</div> 
    <div class="inner">3</div> 
    <div class="inner">4</div> 
</div>