如何在特定区域定位Div？

Question

我正在使用Bootstrap，我正在尝试创建与twitter使用的布局类似的布局，如下面的屏幕截图所示。

我想要做的部分是个人资料图片的位置。我正在尝试添加一个位于另一个div上的div，我真的不知道从哪里开始。

我有导航和蓝色容器，但不知道如何在顶部创建div，如图所示。

http://www.bootply.com/v7fKXw63nh

有什么想法吗？

Answer 1

尝试使用相对或绝对CSS位置。

例如，将以下代码放在示例的底部。

<div style="position: absolute; 
            left: 150px; 
            top: 120px; 
            width: 75px; 
            height: 75px; 
            background-color: #666"></div>

Answer 2

＆＃13;

＆＃13;

#profileWrapper {
  width: 100%;
  height: 150px;
  background: lightgray;
  position: relative;
}
#topHeader {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background: lightblue;
  border-radius: 10px;
}
#profiler {
  width: 100px;
  height: 100px;
  background: lightblue;
  border: 5px solid lightgray;
  border-radius: 5px;
  position: absolute;
  bottom: -50px;
  left: 50px;
  text-align: center;
}
.fa {
  color: lightgray;
  display: table-cell;
  height: 200px;
  vertical-align: middle;
}
.fa:hover {
  color: white;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<div id="profileWrapper">
  <div id="topHeader">
    <div id="profiler"><span class="fa fa-camera fa-3x"></span>
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

Fiddle link

（不要忘记在小提琴中调整演示部分的大小）

HTML：

<div class="col-sm-12">
  <div class="col-sm-2 col-xs-offset-1"></div>
</div>

CSS（在演示中使用）：

.col-sm-12{
  height:100px;
  background:#33CCFF ;
}
.col-sm-2{
  height:150px;
  background:#33CCFF;
  margin-top:50px;
  border: 4px solid white;
  border-radius:5px;
}