Как мне переместить div после уменьшения ширины?

Моя проблема в том, что я хочу переместить красный div из черного наложения после уменьшения ширины, например: когда ширина составляет 500 пикселей, красный div должен появиться в зеленом поле (тело).

Я пытался использовать display: none; и display: inline, но потом я понял, что это просто работает, если вы хотите, чтобы div был в том же месте. Но я хочу изменить позицию, чтобы красный div переходил из одной позиции в другую. Надеюсь, кто-то может помочь!

Спасибо!

function openNav() {
  document.getElementById("myNav").style.width = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}
body {
  font-family: 'Lato', sans-serif;
  background: green;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  width: 200px;
  background: red;
  height: 200px;
  margin: 20px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content"></div>
</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

Codepen: https://codepen.io/anon/pen/XVyoKp


javascript html jquery css codepen
person Ddoouummbbiiaa    schedule 18.01.2018    source источник
comment
Когда я набрал зеленый, я имел в виду белую страницу (когда вы закрываете оверлей)   -  person Ddoouummbbiiaa    schedule 18.01.2018
comment
Я не уверен, что именно должно произойти, но вы всегда можете иметь красный div в теле и просто показать его и скрыть другой, когда ширина достигает желаемой ширины.   -  person Huangism    schedule 18.01.2018
comment
вы можете отредактировать свой вопрос   -  person Huangism    schedule 18.01.2018
comment
Но я использую javascript для игры, и мне нужен только один div, я не могу иметь два   -  person Ddoouummbbiiaa    schedule 18.01.2018
comment
Попробуйте фиксированное позиционирование. Я разместил ответ ниже.   -  person Jonathan Chaplin    schedule 18.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

Используйте фиксированное позиционирование в ваших closeNav и openNav. Это фиксирует положение в определенном месте в окне браузера.

function openNav() {
  document.getElementById("myNav").style.width = "100%";
  var overlay = window.document.getElementsByClassName("overlay-content")[0];
  overlay.style.left = "-1000px";
}

function closeNav() {
  document.getElementById("myNav").style.width = "0%";
  var overlay = window.document.getElementsByClassName("overlay-content")[0];
  overlay.style.position = "fixed";
  overlay.left = "40px;"
}
person Jonathan Chaplin    schedule 18.01.2018