Html 将div置于其他内容之上

我使用的是引导，页面宽度不是固定的

我想在下面显示一个联系人表单div灰色框，如下所示：

所以灰色的接触形式有点像漂浮在蓝色和白色的div上

谢谢

以下是我一直试图做的：

---

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

---

就JFIDLE示例而言，您只需要添加一个右键和一个顶部

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

---

发布您现有的代码绝对+z索引这不是一个好主意。。。如果1,2,3 div具有可变内容，则它们不会以最佳方式堆叠。他只想要一个div。。。将其更改为单个元素4为精细位置绝对值，其他元素宽度：100%；明确：两者皆有；谢谢你的帮助。我试了一下，但它只是把所有的div放在了一起。蓝色和白色不应该相互重叠。只有灰色会浮在它们上面。

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