CSS фиксированная позиция вне холста

Question

У меня есть следующая проблема: использование внешнего холста UIkit для показа / скрытия панели пользователя с аккордеоном в ней. Если на панели вне холста слишком много содержимого, появляется полоса прокрутки. Это нормально. Проблема с кнопкой Close. Если я прокручиваю вниз, он «теряет» свою фиксированную (до нижней) позицию и начинает прокручивать текст вверх. У вас есть идеи, как это исправить?

Здесь вы можете проверить фрагмент:

.mstr-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f9f9f9;
  border-top: 1px solid #ddd;
  padding: 15px;
  text-align: center;
  z-index: 1;
}

.setting-toolbar {
  position: fixed;
  left: 0;
  bottom: 0px;
  right: 0;
  padding: 15px;
}

<link href="https://getuikit.com/css/theme.css" rel="stylesheet"/>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit-icons.min.js"></script>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit.min.js"></script>
<div class="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at sapien lacus. Suspendisse imperdiet rutrum tempus. Cras mollis tortor sed dui ultricies, at iaculis magna viverra. Etiam euismod dapibus metus, vitae feugiat urna semper sit amet. Morbi suscipit, enim at pretium porta, ante mauris euismod orci, vel malesuada justo sem ac dolor. Sed gravida neque ac egestas vestibulum. Donec placerat sem eu ornare aliquam. Cras vitae sem quis ipsum maximus condimentum ac in ex. Suspendisse ac rutrum nulla. Proin in finibus lacus. Duis pharetra ligula dui, ut accumsan ipsum viverra maximus. Aliquam auctor sapien velit, nec ornare lectus euismod faucibus.
  </p>
  
  <div class="panel-settings" id="settings" uk-offcanvas="mode: slide; overlay: true; flip: true; container: .container;">
    <div class="uk-offcanvas-bar">
      <ul uk-accordion="multiple: true" id="setAccordion">
        <li class="uk-open">
          <a class="uk-accordion-title" href="#">Accordion #1</a>
          <div class="uk-accordion-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at sapien lacus. Suspendisse imperdiet rutrum tempus. Cras mollis tortor sed dui ultricies, at iaculis magna viverra. Etiam euismod dapibus metus, vitae feugiat urna semper sit amet. Morbi suscipit, enim at pretium porta, ante mauris euismod orci, vel malesuada justo sem ac dolor. Sed gravida neque ac egestas vestibulum. Donec placerat sem eu ornare aliquam. Cras vitae sem quis ipsum maximus condimentum ac in ex. Suspendisse ac rutrum nulla. Proin in finibus lacus. Duis pharetra ligula dui, ut accumsan ipsum viverra maximus. Aliquam auctor sapien velit, nec ornare lectus euismod faucibus. 
          </div>
        </li>
        <li>
          <a class="uk-accordion-title" href="#">Accordion #2</a>
          <div class="uk-accordion-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at sapien lacus. Suspendisse imperdiet rutrum tempus. Cras mollis tortor sed dui ultricies, at iaculis magna viverra. Etiam euismod dapibus metus, vitae feugiat urna semper sit amet. Morbi suscipit, enim at pretium porta, ante mauris euismod orci, vel malesuada justo sem ac dolor. Sed gravida neque ac egestas vestibulum. Donec placerat sem eu ornare aliquam. Cras vitae sem quis ipsum maximus condimentum ac in ex. Suspendisse ac rutrum nulla. Proin in finibus lacus. Duis pharetra ligula dui, ut accumsan ipsum viverra maximus. Aliquam auctor sapien velit, nec ornare lectus euismod faucibus. 
          </div>
        </li>
        <li>
          <a class="uk-accordion-title" href="#">Accordion #3</a>
          <div class="uk-accordion-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at sapien lacus. Suspendisse imperdiet rutrum tempus. Cras mollis tortor sed dui ultricies, at iaculis magna viverra. Etiam euismod dapibus metus, vitae feugiat urna semper sit amet. Morbi suscipit, enim at pretium porta, ante mauris euismod orci, vel malesuada justo sem ac dolor. Sed gravida neque ac egestas vestibulum. Donec placerat sem eu ornare aliquam. Cras vitae sem quis ipsum maximus condimentum ac in ex. Suspendisse ac rutrum nulla. Proin in finibus lacus. Duis pharetra ligula dui, ut accumsan ipsum viverra maximus. Aliquam auctor sapien velit, nec ornare lectus euismod faucibus. 
          </div>
        </li>
      </ul>
      <div class="setting-toolbar">
        <button id="btn-close" class="uk-button uk-button-primary" uk-toggle="target: #settings">Close</button>
      </div>
    </div>
  </div>
  
  <div class="mstr-toolbar">
    <button class="uk-button uk-button-default">Btn #1</button>
    <button class="uk-button uk-button-default">Btn #2</button>
    <button class="uk-button uk-button-secondary" uk-toggle="target: #settings">Open panel</button>
    <button class="uk-button uk-button-default">Btn #3</button>
  </div>
</div>

Answer 1

Из ваших комментариев, я думаю, вы действительно хотите position: sticky. Sticky позволяет абсолютно установить позицию внутри контейнера, но следите за окном просмотра, если контейнер прокручивается. К сожалению, это экспериментальная реализация. подробнее об этом здесь, **https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky

Под «фиксацией» позиции вы подразумеваете держать ее всегда внизу вашего контента. Это немного путает текущую семантику с позиционированием CSS. position: fixed (в отличие от вашего желания) заблокирует элемент в этой позиции относительно области просмотра. на самом деле вы хотите position: relative на вашем .setting-toolbar. Это позволяет ему течь по мере того, как ваш контент растет / сжимается, и сохраняет его правильно установленным в нижней части контейнера.

.mstr-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f9f9f9;
  border-top: 1px solid #ddd;
  padding: 15px;
  text-align: center;
  z-index: 1;
}

.setting-toolbar {
  position: sticky;
  left: 0;
  bottom: 0px;
  right: 0;
  padding: 15px;
}

<link href="https://getuikit.com/css/theme.css" rel="stylesheet"/>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit-icons.min.js"></script>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit.min.js"></script>
<div class="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at sapien lacus. Suspendisse imperdiet rutrum tempus. Cras mollis tortor sed dui ultricies, at iaculis magna viverra. Etiam euismod dapibus metus, vitae feugiat urna semper sit amet. Morbi suscipit, enim at pretium porta, ante mauris euismod orci, vel malesuada justo sem ac dolor. Sed gravida neque ac egestas vestibulum. Donec placerat sem eu ornare aliquam. Cras vitae sem quis ipsum maximus condimentum ac in ex. Suspendisse ac rutrum nulla. Proin in finibus lacus. Duis pharetra ligula dui, ut accumsan ipsum viverra maximus. Aliquam auctor sapien velit, nec ornare lectus euismod faucibus.
  </p>
  
  <div class="panel-settings" id="settings" uk-offcanvas="mode: slide; overlay: true; flip: true; container: .container;">
    <div class="uk-offcanvas-bar">
      <ul uk-accordion="multiple: true" id="setAccordion">
        <li class="uk-open">
          <a class="uk-accordion-title" href="#">Accordion #1</a>
          <div class="uk-accordion-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at sapien lacus. Suspendisse imperdiet rutrum tempus. Cras mollis tortor sed dui ultricies, at iaculis magna viverra. Etiam euismod dapibus metus, vitae feugiat urna semper sit amet. Morbi suscipit, enim at pretium porta, ante mauris euismod orci, vel malesuada justo sem ac dolor. Sed gravida neque ac egestas vestibulum. Donec placerat sem eu ornare aliquam. Cras vitae sem quis ipsum maximus condimentum ac in ex. Suspendisse ac rutrum nulla. Proin in finibus lacus. Duis pharetra ligula dui, ut accumsan ipsum viverra maximus. Aliquam auctor sapien velit, nec ornare lectus euismod faucibus. 
          </div>
        </li>
        <li>
          <a class="uk-accordion-title" href="#">Accordion #2</a>
          <div class="uk-accordion-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at sapien lacus. Suspendisse imperdiet rutrum tempus. Cras mollis tortor sed dui ultricies, at iaculis magna viverra. Etiam euismod dapibus metus, vitae feugiat urna semper sit amet. Morbi suscipit, enim at pretium porta, ante mauris euismod orci, vel malesuada justo sem ac dolor. Sed gravida neque ac egestas vestibulum. Donec placerat sem eu ornare aliquam. Cras vitae sem quis ipsum maximus condimentum ac in ex. Suspendisse ac rutrum nulla. Proin in finibus lacus. Duis pharetra ligula dui, ut accumsan ipsum viverra maximus. Aliquam auctor sapien velit, nec ornare lectus euismod faucibus. 
          </div>
        </li>
        <li>
          <a class="uk-accordion-title" href="#">Accordion #3</a>
          <div class="uk-accordion-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at sapien lacus. Suspendisse imperdiet rutrum tempus. Cras mollis tortor sed dui ultricies, at iaculis magna viverra. Etiam euismod dapibus metus, vitae feugiat urna semper sit amet. Morbi suscipit, enim at pretium porta, ante mauris euismod orci, vel malesuada justo sem ac dolor. Sed gravida neque ac egestas vestibulum. Donec placerat sem eu ornare aliquam. Cras vitae sem quis ipsum maximus condimentum ac in ex. Suspendisse ac rutrum nulla. Proin in finibus lacus. Duis pharetra ligula dui, ut accumsan ipsum viverra maximus. Aliquam auctor sapien velit, nec ornare lectus euismod faucibus. 
          </div>
        </li>
      </ul>
      <div class="setting-toolbar">
        <button id="btn-close" class="uk-button uk-button-primary" uk-toggle="target: #settings">Close</button>
      </div>
    </div>
  </div>
  
  <div class="mstr-toolbar">
    <button class="uk-button uk-button-default">Btn #1</button>
    <button class="uk-button uk-button-default">Btn #2</button>
    <button class="uk-button uk-button-secondary" uk-toggle="target: #settings">Open panel</button>
    <button class="uk-button uk-button-default">Btn #3</button>
  </div>
</div>