Как сделать появление блока в видимой части экрана?

Question

[DrunkMaster]

Демка: jsfiddle.net/ufwsr825/2

Есть 2 блока, один внизу, один вверху. Скрытый поначалу блок появляется только после Клика на click.

<div id="show">Это блок, который появляется</div>
<h1 id="click">Клик</h1>

Стили

#show{
  width: 80%;
  border: 1px solid black;
  margin: 4rem auto 0;
  display: none;
}

#click{
  margin-top: 30rem;
}

JS

click.onclick = function() {
    document.getElementById('show').style.display='block';
};

Проблема в том, что блок появляется не в видимой части экрана, а в самом вверху страницы, т.е. при клике непонятно что блок появился. И только прокрутив страницу обратно вверх можно его увидеть

Answer 1

[leni_m]

добавьте к #show
position: fixed;
например.
Как вы стилизуете этот блок, так он и появится.
Вообще уберите display:none; и располагайте ваш блок где вам нужно, чтобы он появился. Как он будет готов - добавляйте display:none;