修复另一个可滚动 div 右上角的 div答案

【问题标题】：Fixing div in top right corner of another scrollable div修复另一个可滚动 div 右上角的 div
【发布时间】：2020-03-18 17:50:03
【问题描述】：

我需要在另一个 div 的右上角修复一个 div。父 div 使用新内容进行更新并且可以滚动。

我尝试遵循how to place last div into right top corner of parent div? (css) 给出的一些答案并玩了一点，但是当我滚动父 div 时它总是滚动到视野之外。我怎样才能确保它留在那里？

这是我最接近我需要的东西。但如果我滚动父 div，它会滚动到视野之外。

.A {
  position: absolute;
  height: 130px;
  overflow: auto;
}

.B {
  position: absolute;
  right: 2px;
  top: 2px;
}

<div>
    <div className="A">
        <b>SOME TEXT</b>
        <div className="B">
            <b>SOME OTHER TEXT</b>
        </div>
    </div>
</div>

【问题讨论】：

我认为你需要position:fixed 而不是position:absolute
@MohammadFaisal，通过这样做，子 div 只是移动到底部，滚动问题仍然存在。
请您分享您的代码输出的屏幕截图。
position:fixed for class B 就可以了。
你的问题太不清楚了。你的父 div 是什么？你想粘在哪个部分？哪一部分是可滚动的？

标签： javascript css

【解决方案1】：

我只是尝试解决可能会得到一些帮助

<div class="parent">
    <div class="A">
        <b>SOME TEXT</b>
    </div>
    <div class="B">
      <b>SOME OTHER TEXT</b>
    </div>
</div>

.A {
  position: absolute;
  width:100%;
  height: 530px;
}

.B {
  position: sticky;
  top: 0px;
}
.parent{
    height: 200px;
    overflow: auto;
    position: relative;
    display: flex;
    justify-content: flex-end;
}

【讨论】：

这将帮助您创建滚动和固定到顶部，即使这只是您应用程序的一部分。使用位置固定是相对于你的整个屏幕。

【解决方案2】：

如果 javascript 是一个选项，您可以调整布局和样式，例如：

<div>
    <div className="A">
        <b>SOME TEXT</b>
        <div className="B">
           <div className="C">
             <b>SOME OTHER TEXT</b>
           </div>
        </div>
    </div>
</div>


.A {
  position: absolute;
  height: 130px;
  overflow: auto;
}

.B {
  position: absolute;
  right: 2px;
  top: 2px;
  height: {_ => _.elementAScrollHeight};
}
.C {
  position: sticky;
  top: 0;
}

其中 elementAScrollHeight 滚动高度是 JS 得到的滚动高度（例如在 react 中使用 refs 很容易完成）。

【讨论】：

【解决方案3】：

A 类需要位置：相对，B 类需要位置：固定

.A {
  position: relative;
  height: 130px;
  overflow: auto;
}

.B {
  position: fixed;
  right: 2px;
  top: 2px;
}

Example

【讨论】：

【解决方案4】：

想出了一种方法，使用 z-index：

.A {
  position: absolute;
  top: 0;
  left: 0;
  height: 130px;
  overflow: auto;
}

.B {
  z-index: 2;
  position: absolute;
  right: 2px;
  top: 2px;
}

<div class="parent">
    <div class="A">
        <b>SOME TEXT</b>
    </div>
    <div class="B">
        <b>SOME OTHER TEXT</b>
    </div>
</div>

【讨论】：

您的解决方案与 z-index 无关，您的 div 右上方对齐，因为您的 div .B 不再在 .A 中，具有绝对定位，但在 .parent 中，具有静态定位。