基本 CSS 定位问题答案

【问题标题】：Basic CSS positioning issue基本 CSS 定位问题
【发布时间】：2014-03-24 04:57:55
【问题描述】：

我有 3 个盒子。当将中间的位置设置为相对（在这种情况下为“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 之外也可以使用。还有其他方法吗？

【问题讨论】：

基本上，你想让蓝框跟随绿框的位置吗？
是的。我已经尝试使用我忘了说的 margin-top，并且除了 Internet Explorer 之外都可以使用。

标签： html css

【解决方案1】：

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

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

Demo

【讨论】：

我忘了说我试过了，但问题是它在 IE 上不起作用......

【解决方案2】：

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

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

【讨论】：