Элементы Div (переключатели) перекрываются на другом элементе Div

Question

У меня есть div с множеством переключателей в нем, а затем отдельный div, прикрепленный к нижней части экрана.

По какой-то причине переключатели в div внизу отображаются сверху div прикреплен к нижней части экрана.

Как мне это изменить? Это почти как если бы - если бы это было в Powerpoint - я хочу щелкнуть правой кнопкой мыши и «перенести на передний план» тот div, прикрепленный к нижней части экрана!

HTML код для div с переключателями:

<div class="targeting flex-child">
      <h1>Select Targeting</h1>

      <ul class='md-list'>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Regions</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-5"><input type="checkbox" id="list-switch-5" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Cities</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-6"><input type="checkbox" id="list-switch-6" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Towns</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-7"><input type="checkbox" id="list-switch-7" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Ring-Fencing</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-8"><input type="checkbox" id="list-switch-8" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Age</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-9"><input type="checkbox" id="list-switch-9" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Gender</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-10"><input type="checkbox" id="list-switch-10" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Job Role</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-11"><input type="checkbox" id="list-switch-11" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Salary</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-12"><input type="checkbox" id="list-switch-12" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Interests</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-13"><input type="checkbox" id="list-switch-13" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Contextual</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-14"><input type="checkbox" id="list-switch-14" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Domain</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-15"><input type="checkbox" id="list-switch-15" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Device Manufacturer</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-16"><input type="checkbox" id="list-switch-16" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Device Type</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-17"><input type="checkbox" id="list-switch-17" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Device Model</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-18"><input type="checkbox" id="list-switch-18" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">Browser</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-19"><input type="checkbox" id="list-switch-19" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">YouTube</span>
          <span class="mdl-list__item-secondary-action"><label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-20"><input type="checkbox" id="list-switch-20" class="mdl-switch__input" value="0.08"/></label></span>
        </li>
    </ul>
    </div>

HTML код для div, прикрепленный к нижней части экрана:

<div class="runningtotal">
  Running CPC Total (in £):
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" readonly="true" pattern="-?[0-9]*(\.[0-9]+)?" id="sum" value="0.00" data-total="0">
  </div>

  Total Cost (in £):
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" readonly="true" pattern="-?[0-9]*(\.[0-9]+)?" id="totalcost" value="0 (until clicks specified)" data-total="0">
  </div>

  <!-- <button id="sales_order_form_button">Create Sales Order Form</button> -->

  <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="sales_order_form_button">
    Create Sales Order Form
  </button>

</div>