固定元素内置div与滚动条？

Question

我试图让一个绝对定位的元素保持其位置，而有人滚动父div的内容。我已经阅读了许多关于将定位应用于绝对或相对的父div的问题，但仍然无法在滚动div内部获得绝对定位元素。 div内的内容大于div的高度。如何让子div通过滚动来保持其位置？

小提琴：https://jsfiddle.net/724vpsLf/1/

<div id="wrap">
    <div id="abs">
        Abs Arrow
    </div>
</div>

#wrap {
  position: fixed:
  top: 0;
  left: 0;
  height: 80%;
  width: 200px;
}
#abs {
  position: absolute;
  bottom: 10px;
  right: 0px;
  background: #f00;
  color: #fff;
}

Answer 1

而不是while( $row = $result->fetch_assoc() ) { echo "id: " . $row["ID"]. " - Name: " . $row["Name"]. " " . $row["Surname"]. "<br>"; } ，请尝试position: absolute。 position:fixed将无法按照您使用它的方式运行。 ;）

CSS + HTML：

position:absolute

    #wrap {
      position: fixed:
      top:0;
      left:0;
      height: 80%;
      width: 200px;
    }
    
    #abs {
      position: fixed;
      bottom: 10px;
      right: 0px;
      background: #f00;
      color: #fff;
    }

希望它有所帮助：）

Answer 2

你是否经历过这样的事情？

#parent{
  position: relative;  
}
#wrap {
  position:absolute;
  width: 200px;
  height: 200px;
  background-color:#EFEFEF;
  overflow:visible;
}
#abs {
  position:fixed;
  top: 20px;
  background: #f00;
  color: #fff;
}

<div id="parent">
<div id="wrap">
  <div id="abs">Abs Arrow</div>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
  <p>Content goes here</p>
</div>
</div>