Блог

Главная - Вопросы по программированию - Кнопка не отвечает при выталкивании из столбца

Кнопка не отвечает при выталкивании из столбца

#twitter-bootstrap

#twitter-bootstrap

Вопрос:

У меня есть шаблон, в котором есть два столбца начальной загрузки.

В первом столбце есть форма, которая заполняется серверной частью. Результатом этого является то, что форма шире столбца, а кнопка выталкивается в область второго столбца.

Часть кнопки в первом столбце доступна для просмотра, но часть во втором столбце не отвечает.

 #wrapper{
  width: 600px;
  margin: auto;
}

#firstColumn{
  border: 1px solid orange;
}

#secondColumn{
  border: 1px dashed green;
}
  
form{
  background: tomato;
  width: 500px;
  text-align: right;
  z-index: 10;
}
    
button{
 background: green;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row" id="wrapper">
  <div class="col-md-9" id="firstColumn">
    First Column
    <form>
      <button>Click me!</button>
    </form>
  </div>
  <div class="col-md-3" id="secondColumn">
    Second Column
    </div>
</div>

https://codepen.io/mpoo/pen/dyMmmwp

Как бы вы хотели сделать всю кнопку интерактивной?

Ответ №1:

Просто добавьте z-index: -1 во второй столбец

 #wrapper{
  width: 600px;
  margin: auto;
}

#firstColumn{
  border: 1px solid orange;
}

#secondColumn{
  border: 1px dashed green;
  z-index: -1;
}
  
form{
  background: tomato;
  width: 500px;
  text-align: right;
  z-index: 10;
}
    
button{
 background: green;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row" id="wrapper">
  <div class="col-md-9" id="firstColumn">
    First Column
    <form>
      <button>Click me!</button>
    </form>
  </div>
  <div class="col-md-3" id="secondColumn">
    Second Column
    </div>
</div>

Комментарии:

1. Спасибо @olegoriginal, который делает свое дело. Я играл с натуральными числами z-индекса, но не думал об использовании отрицательного z-индекса.