如何防止响应div使用CSS进入另一个div？

Question

我的顶部和底部有一些固定的像素div，中间有一个响应的div。当屏幕调整得很小时，如何防止它进入顶部div？

这是一个说明问题的工作示例。我希望能够使浏览器变小，而不是让黑盒子变成红色。同时保持响应能力。

<div style="position:relative; height:100px; width:100%; background:red;"/>

        

http://jsfiddle.net/RHZLr

Answer 1

而不是使用宽度：100％尝试使用固定宽度。固定宽度不会移动，因此您不必担心它们会侵入其他div。

同时<！/ H3>

一旦屏幕达到一定的大小，你可能应该使用CSS媒体查询给div一个固定的（非移动的）位置。

e.x。

#div1{
  position:relative; 
  left:25%; 
  width:50%;
}
@media screen and (max-width:600px){
   #div1{
      width:500px;
      height:500px;
   }
}

Working Pen!

（codepen.io示例）

Answer 2

在这种情况下，我会忘记绝对定位。使所有盒子相对定位，并使用边距根据需要定位黑盒子。这样，响应能力就可以发挥作用。

Working Fiddle

#blackBox{
    margin: 0 auto;
    height: 200px;
    width: 400px;
    background: black;
}