html - Canvas 外的 CSS 固定位置

Question

我有以下问题:使用 UIkit 的 Canvas 外向用户显示/隐藏带有 Accordion 的面板。如果 Canvas 外面板中的内容过多，则会出现滚动条。没关系。问题出在 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 允许将位置绝对设置在容器内，但如果容器滚动则跟随视口(viewport)。不幸的是，这是一个实验性的实现。在这里阅读更多相关信息，** https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky

通过“固定”位置，您的意思是将其始终保持在内容的底部。鉴于当前语义与 css 定位，这有点令人困惑。 position: fixed(与您想要的不同)会将元素锁定到相对于视口(viewport)的那个位置。你真正想要的是 .setting-toolbar 上的 position: relative。这使它能够随着内容的增长/收缩而流动，并使其很好地固定在容器的底部。

.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>