Question

我有3个盒子。将中间位置设置为相对位置（在这种情况下为＆＃39; body＆＃39;在这种情况下）和负顶部时，下面的框也不会向上移动。我怎么能这样做？

HTML：

<div class="box" id="up"></div>
<div class="box" id="middle"></div>
<div class="box" id="down"></div>

CSS：

.box {
  width: 400px;
  height:200px;
  position: relative;
}

#up {
  background: red;
}

#middle {
  top: -50px;
  background: green;
}

#down {
  background: blue;
}

http://codepen.io/anon/pen/dBgbz/

编辑：我忘了说我已尝试使用负边距，但除了Internet Explorer之外还可以使用。还有其他办法吗？

Answer 1

定义您的 #middle margin-top: -50px和删除 top : -50px

#middle {
margin-top:-50px;  // add this  
top: -50px;  // remove this 
  background: green;
}

<强> Demo

Answer 2

您是否将顶部添加到#down框：

#down {
  top: -50px;
  background: blue;
}

基本的CSS定位问题

2 个答案: