我想同时使用绝对位置和粘性位置。那可能吗？如果是，那么如何？

Question

我希望能够将显示器和屏幕上的元素固定在同一位置，但不想使用position:fixed，因为它会导致其他元素出现问题。我希望该元素位于其他元素之上，因此我使用了 z-index。另外，我希望元素能够从一侧移动到另一侧，但不能在显示屏上滚动。以下是我正在使用的代码：

---

<div style="position:relative;z-index:3;height:100%">
  <div style="position:absolute;bottom: -460px;right:-30px;height:100%;">
    <div style="position: sticky;top: 800px;">
      <a class="btn btn-default dropdown-toggle" style="background-color:#00AF95;border-radius:50%;margin-left:100px;" data-toggle="dropdown" onclick="$('#floatingButton').toggle();" data-hover="dropdown" aria-expanded="true">
         <i class="fa fa-plus" style="background-color:#00AF95;color:#f7f8fa"></i>
      </a>
         <div class="dropdown dropdown-inline" style="width:250px;display:block;bottom:80px;">
           <ul class="dropdown-menu SMSUI" role="menu" id="floatingButton" style="display: block;">
             <li class="dropdown" data-hover="dropdown" title="Send SMS to a Number"[enter image description here][1] onclick="(this.event.stopPropagation());">
                 <div id="numberDialerField" class="pad10R pad10L">
                    <input type="text" id="phoneCodeNumber" style="margin-left:10px;width:60px;" name="phoneCode" class="softphone-form-control" data-i18n="[placeholder]phonecode" placeholder="Ph. Code" value="">
                     <span>-</span>
                     <input type="text" id="telNumber" name="phoneNumber" class="softphone-form-control" data-i18n="[placeholder]label_phone_number" placeholder="Phone Number" value="" required="">
                       <div class="telFuncBtnDiv">
                          <span id="backspaceBtnSpan" class="cursor-pointer">
                             <i class="fa fa-check fa-xs"></i>
                          </span>
                       </div>
                    </div>
                 </li>
             </ul>
         </div>
    </div>
</div>

---

作为参考，我附上了一个示例图像，它有助于理解我想要的解决方案，但不完全是。我希望可移动元素保持固定，并且使用位置：粘性根本不移动。

我希望图标保持在这个位置，没有位置：固定

Answer 1

您可以通过以下方式实现这一目标：

家长：

position: absolute;
...

孩子：

position: sticky;
top: 0;
height: 100vh;

注意 1：确保父元素（在 DOM 树上）没有overflow: hidden. 如果是这样，请将其更改为overflow: visible

注意2：确保子元素被赋予固定的高度（不是%）

Answer 2

如果该元素真正独立并且层次高于其他元素，我会将 div 移出其他嵌套的 div。此外，通过移动它，它将不再是应用了position:relative 的父元素的子元素。这可能是您在定位时遇到的问题。

顺便说一句，通过使用固定与粘性，您将获得更深入的浏览器支持。