如何将元素位置设置为固定在其父容器中

Question

我想将一个元素的位置设置为固定，就像在这个谷歌+示例中相对于浏览器固定按钮一样：

但我的问题是我有多个parent-container并且每个容器都有一个类to-top的元素需要固定，并且相对于右下角的parent-container。

和

我想将to-top元素固定限制设置为其自己的parent-container，这样当用户滚动to-top时，仅在其parent-container

内移动

这是我弄清楚的小提琴。希望我解释得很好。 DEMO

Answer 1

在Div中添加ID class="parent-container row3" id="row3"。并在ID中添加锚点标记 href，如 <a href="#row3">UP</a>

单击按钮时呼叫父节目顶部。试试这个

现场演示 Here

下面的代码段示例

.wrapper
{
  height: 500px;
  overflow: auto;
}

.header
{
  background: seagreen;
  color: white;
  padding: 5px;
}

.parent-container
{
  height: 700px;
  padding: 5px;
}

.parent-container > a
{
   display: block;
   padding: 5px;
   margin: 5px;
   background: #eeeeee;
}

.row1
{
  background: lightcyan;  
}

.row2
{
  background: lightblue;  
}

.row3
{
  background: lightgreen;  
}

.to-top
{
  position: relative;
  top: 290px;
  width: auto;
  float: right;
}

<div class="wrapper">
  <div class="holder">
     <div class="parent-container row1" id="row1">
       <div class="header">Header 1</div>
       <a href="#">Item 1</a>
       <a href="#">Item 1</a>
       <a href="#">Item 1</a>
       
       <div class="to-top"><a href="#row1">UP</a></div>
     </div>
     <div class="parent-container row2" id="row2">
       <div class="header">Header 2</div>
       <a href="#">Item 1</a>
       
       <div class="to-top"><a href="#row2">UP</a></div>
     </div>
     <div class="parent-container row3" id="row3">
       <div class="header">Header 3</div>
       <a href="#">Item 1</a>
       <a href="#">Item 1</a>
       
       <div class="to-top" ><a href="#row3">UP</a></div>
     </div>
  </div>
</div>