Как я могу предотвратить переход адаптивного div в другой div с помощью CSS?

Question

У меня есть фиксированные пиксельные деления сверху и снизу и отзывчивый посередине. Как я могу предотвратить попадание в верхний блок, когда экран настроен на маленький?

Вот рабочий пример для иллюстрации проблемы. Я хочу иметь возможность сделать браузер маленьким, а черный ящик не должен переходить в красный. Сохраняя отзывчивость.

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

http://jsfiddle.net/RHZLr

Answer 1

Я бы забыл абсолютное позиционирование в этом случае. Сделайте все ящики относительно расположенными и используйте поля, чтобы расположить черный ящик, как вам угодно. Таким образом, отзывчивость работает как хотелось бы.

Рабочая скрипка

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

Answer 2

Вместо использования ширины:100% попробуйте использовать фиксированную ширину. Фиксированная ширина не перемещается, поэтому вам не придется беспокоиться о том, что они вторгнутся в другие элементы.

Также!

Возможно, вам следует использовать медиазапросы CSS, чтобы дать элементам div фиксированную (неподвижную) позицию, как только экран достигнет определенного размера.

бывший

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

Рабочая ручка!

(пример codepen.io)