Как задать верхний отступ в вёрстке?

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

Решение очень простое:

.advertising-image {
  position: fixed;
  top: 50vh; (ну или %)
  left: 50vw;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/c5s38cj2/

Фишка этого приема еще в том, что если окно меньше картинки, то центр картинки все равно остается в центре видимой области.

Периодически встречается задача оцентровать блок внутри другого блока. Внешний блок может быть как больше внутреннего так и меньше в зависимости от экрана. Тот же подход, но вместо position: fixed - position: absolute или position: relative (в зависимости от задачи), а внешнему блоку соответственно position: relative.

Убрать меню по клику в не области?

Простите долго не заглядывал сюда

Почему при задавании атрибуты переходит сразу же по ссылке?

Ingernirated: Не думаю, что отсутствие адреса у ссылки отменяет действие браузера по умолчанию. Просто при отсутствии адреса или якоря обработчик по умолчанию ничего не сделает. Но он будет вызван.

А теперь приблизительная последовательность.
1. Ты кликнул.
2. Браузер проверили есть ли пользовательские обработчики события и сформировал очередь обработчиков события клик на этой ссылке. Последний в очереди обработчик события по умолчанию.
3. Первым выполняется твой обработчик который меняет несколько значений объекта элемента ссылки. Скорее всего после этого бразуер установит в конец очереди операцию перерисовки ДОМ-узла
4. Выполняется обработчик по умолчанию. Который проверяет значение href объекта. Оно не пусто - как раз перед этим твой обработчик сделал его равным "www.w3s.com". Следовательно инициируется переход.
5. Ну еще наверное успевает отработать перерисовка ДОМ-узла ссылки.

Как правильно работать с z-index и Opacity?

А так вот в чем вопрос. Ну есть еще вариант вместо опасити использовать для заливки фона цвет в формате rgba