[英]Fixing div in top right corner of another scrollable div
I need to fix a div in the top-right corner of another div.我需要在另一个 div 的右上角修复一个 div。 The parent div gets updated with new content and is scrollable.父 div 使用新内容更新并且是可滚动的。
I tried following some of the answers given to how to place last div into right top corner of parent div?我尝试按照有关如何将最后一个 div 放入父 div 的右上角的一些答案进行操作? (css) and played around a little, but it always scrolls out of view when I scroll the parent div. (css)并播放了一点,但是当我滚动父 div 时它总是滚动到视图之外。 How can I make sure it stays there?我怎样才能确保它留在那里?
This is the closest I've gotten to what I need.这是我最接近我需要的。 But it scrolls out of view if I scroll the parent 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>
I just tried to solve may got some help我只是试图解决可能会得到一些帮助
<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;
}
If javascript is an option, you could adjust your layout and styles like:如果 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;
}
Where elementAScrollHeight scroll height is the scroll height of gotten by JS (eg in react it's done easily using refs).其中 elementAScrollHeight 滚动高度是 JS 获取的滚动高度(例如,在反应中,它可以使用 refs 轻松完成)。
Figured out a way to do it, using z-index:想出一种方法来做到这一点,使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.