将div放在其他内容上

Question

我正在使用bootstrap，页面宽度不固定。

我想在此处显示联系表单div（灰色框）：

所以灰色的联系表格漂浮在蓝色和白色的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

就你的jsfiddle例子而言，你需要添加的只是右边和顶部。

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

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

Answer 2

根据需要定位外部div，然后使用absolute定位内部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>