Position absolute and position sticky

Use the position absolute and position sticky at the same time.

by Suryar Praveen

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container position">
  <div class="row">
    <div clas="col">
      <div><i class="fa fa-comment text-muted"></i> <br /><span>20</span></div>
      <hr />
      <div><i class="fa fa-heart text-danger"></i> <br /><span>1</span></div>
    </div>
  </div>

</div>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col">
      <img src="https://i.ibb.co/kKhZDBZ/banner.jpg" class="col" />
    </div>
  </div>
  <div class="media mt-4">
    <div class="user_bg mr-3">
      <i class="fa fa-user text-white"></i>
    </div>
    <div class="media-body mt-2">
      <h5 class="mt-0">user_508935</h5>
      2019 是拜托 5 哈罗喂 11 再见
    </div>
  </div>
  <figure class="highlight mt-4">
    21241414
  </figure>
  
  <!-- Comment Section -->
  <div class="text-content">1 再见罗喂</div>

  <div class="row">
    <div class="col-md-1">
      <div class="user_bg mr-5 mt-4">
        <i class="fa fa-user text-white"></i>
      </div>
    </div>
    <div class="col-md-11">
      <figure class="highlight mt-4 pt-5">
      </figure>
      <button type="button" class="btn btn-light pull-right">再见罗喂</button>
    </div>
  </div>

<!-- END Comment Section -->

<!-- Comment Section -->
  <div class="text-content">1 再见罗喂</div>

  <div class="row">
    <div class="col-md-1">
      <div class="user_bg mr-3 mt-4">
        <i class="fa fa-user text-white"></i>
      </div>
    </div>
    <div class="col-md-11">
      <figure class="highlight mt-4 pt-5">
      </figure>
      <button type="button" class="btn...

CSS

.user_bg{background: #f1e9e9;width: 80px;height: 80px;text-align: center;border-radius: 50px;font-size: 3rem;}
.highlight {padding:2rem;background:#f1e9e9;border-radius:5px;}
.position {     position: fixed;    height: 100%;}
.position .row {position: absolute;    left: calc(100% - 90%);    top: calc(100% - 90%);}