html - 基本的 CSS 定位问题

Question

我有 3 个盒子。当将中间的位置设置为 relative(在本例中为“body”)和负顶部时，下面的框也不会向上移动。我怎么能那样做？

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 和remove top : -50px

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

Demo