javascript - 固定定位 div 内的粘性 div

Question

需要放置一个 div，它应该粘在父 div 的滚动上，该 div 定位到 fixed。请检查以下代码片段。

<style>
   .outer{
     width:300px;
     height:400px;
     border:1px solid red;
     overflow:auto;
     position:fixed;
     top:50px;
     left:100px;
   }
   .tag{
    position:absolute;
    top:0px;
    left:80px;
    background:#ffcc33;
    border:2px solid #dfa800;
    border-top:0px;
    padding:3px 5px;
   }
   .inner{
     height:800px;
     border:1px solid green;
     margin:0px 5px;
   }
 </style>

 <div  class="outer"> <!-- This is scroll-able-->
   <div class="tag">Click here to Refresh</div><!-- This should be sticky-->
   <div class="inner"><!--This content causes scrolling-->
      Inner content...........
   </div>
 </div> 

所以在这里，tag 部分应该贴在 outer div 的顶部。这里是 fiddle

是否有任何解决方法可以使用纯 css 实现此目的。

Answer 1

我看到的关于 css 的唯一方法是将标签放置在固定位置，并将其与父 div 对齐。

像这样:

.outer {
     width: 300px;
     height: 400px;
     border: 1px solid red;
     overflow: auto;
     position: fixed;
     top: 50px;
     left: 100px;
   }
   
   .tag {
     position: fixed;
     top: 50px;
     left: 180px;
     background: #ffcc33;
     border: 2px solid #dfa800;
     border-top: 0px;
     padding: 3px 5px;
   }
   
   .inner {
     height: 800px;
     border: 1px solid green;
     margin: 0px 5px;
   }

<div class="outer">
  <div class="tag">Click here to Refresh</div>
  <div class="inner">
    Inner content...........
  </div>
</div>