Ссылки перекрываются следующим элементом

Question

Это ссылки, которые я добавил на страницу:

<div><h2><a href="https://gos4.com/digital-marketing-melbourne/" target="_blank"  class="button one">Digital Marketing </a>
                <a href="https://gos4.com/video-production-melbourne/" target="_blank"  class="button one">Video Production </a> 
                <a href="https://gos4.com/graphic-design-melbourne/" target="_blank"  class="button one">Graphics Design </a> <br></h2></div>

И css:

    .button{
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 20px;
    position: relative;
                    padding: 10px;
                    margin: 10px 20px 30px 0 !important;
}

@media screen and (max-width: 800px) {
  .button {
    display:block;
      z-index:above;
  }
}

Он работает, как задумано, на экране размером более 800 пикселей. Однако на моем мобильном устройстве последняя ссылка становится неактивной, поскольку она перекрывается со следующим элементом на странице.

Ссылка на страницу

Пожалуйста, дайте мне знать, как Я могу это исправить.

Answer 1

Пока нет position:absolute s, вы можете добавить маржу к элементам. Это отталкивает другие элементы от себя на заданное расстояние.

Answer 2

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

Может быть, поэкспериментируйте примерно так:

@media screen and (max-width: 800px) {
  .button {
    display:block;

    margin: 1% auto;
  }

А также, я не знаю, нужен ли вам z-index для того, что у вас уже есть на странице, но вам нужно будет дать ему реальный значение для его работы:

синтаксис z-индекса: авто | число | начальное | наследование;