Javascript 固定定位div内的粘性div

需要放置一个

div

，该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> 


.外部{
宽度：300px；
高度：400px；
边框：1px纯红；
溢出：自动；
位置：固定；
顶部：50px；
左：100px；
}
.标签{
位置：绝对位置；
顶部：0px；
左：80px；
背景:#ffcc33；
边框：2px实心#dfa800；
边框顶部：0px；
填充物：3px 5px；
}
.内部{
高度：800px；
边框：1px纯绿色；
利润率：0px 5px；
}
单击此处刷新
内部内容。。。。。。。。。。。

因此，在这里，
标签
部件应该粘贴到
外部
分区的顶部

使用纯css是否有任何解决方法来实现这一点。
我看到的css的唯一方法是将标记置于固定位置，并将其与父div对齐

像这样：


.outer{
宽度：300px；
高度：400px；
边框：1px纯红；
溢出：自动；
位置：固定；
顶部：50px；
左：100px；
}
.标签{
位置：固定；
顶部：50px；
左：180像素；
背景:#ffcc33；
边框：2px实心#dfa800；
边框顶部：0px；
填充物：3px 5px；
}
.内部{
高度：800px；
边框：1px纯绿色；
利润率：0px 5px；
}

单击此处刷新
内部内容。。。。。。。。。。。
我所看到的css的唯一方法是将标记放在固定位置，并将其与父div对齐

像这样：


.outer{
宽度：300px；
高度：400px；
边框：1px纯红；
溢出：自动；
位置：固定；
顶部：50px；
左：100px；
}
.标签{
位置：固定；
顶部：50px；
左：180像素；
背景:#ffcc33；
边框：2px实心#dfa800；
边框顶部：0px；
填充物：3px 5px；
}
.内部{
高度：800px；
边框：1px纯绿色；
利润率：0px 5px；
}

单击此处刷新
内部内容。。。。。。。。。。。
这里有一个解决方案，它在chrome上工作。现在，如果这在其他地方失败（可能是由于与嵌套的固定位置不一致），那么如果标记元素不必位于固定位置元素内部，也可以位于固定位置元素外部，那么它肯定会起作用

   .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;
   }

这里有一个解决方案，它在chrome上起作用。现在，如果这在其他地方失败（可能是由于与嵌套的固定位置不一致），那么如果标记元素不必位于固定位置元素内部，也可以位于固定位置元素外部，那么它肯定会起作用

   .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;
   }

尝试在标记周围引入包装器div-这样可以分离包装器上的定位逻辑，并将标记设置为
position:fixed用于粘性。注意
位置：固定本身会将其从正常的dom流中拉出，因此需要调整其位置

HTML

尝试在标记周围引入包装器div-这样可以分离包装器上的定位逻辑，并将标记设置为
position:fixed用于粘性。注意
位置：固定本身会将其从正常的dom流中拉出，因此需要调整其位置

HTML

如果您希望它处于绝对位置，则不应让父对象滚动，因为它将跟随滚动（coordonate 0保持在顶部，并随着滚动向上移动）

您只需滚动内部div：


.outer{
宽度：300px；
高度：400px；
边框：1px纯红；
位置：固定；
顶部：50px；
左：100px；
}
.标签{
位置：绝对位置；
顶部：0px；
左：80px；
背景:#ffcc33；
边框：2px实心#dfa800；
边框顶部：0px；
填充物：3px 5px；
}
.内部{
溢出：自动；
身高：100%；
边框：1px纯绿色；
利润率：0px 5px；
}

单击此处刷新
内部内容。。。。。。。。。。。


















































结束
如果您希望它处于绝对位置，则不应让父对象滚动，因为它将跟随滚动（coordonate 0保持在顶部，并随着滚动向上移动）

您只需滚动内部div：


.outer{
宽度：300px；
高度：400px；
边框：1px纯红；
位置：固定；
顶部：50px；
左：100px；
}
.标签{
位置：绝对位置；
顶部：0px；
左：80px；
背景:#ffcc33；
边框：2px实心#dfa800；
边框顶部：0px；
填充物：3px 5px；
}
.内部{
溢出：自动；
身高：100%；
边框：1px纯绿色；
利润率：0px 5px；
}

单击此处刷新
内部内容。。。。。。。。。。。


















































结束
您可以将标签移到固定容器外并固定在同一位置？
您可以将标签移到固定容器外并固定在同一位置？
您是否尝试使用position:fixed on.tag？如果答案正确，请将其标记为正确？@sagarkodte Yes，但我也必须将顶部固定在我不喜欢的内分区上。你试过使用position:fixed on.tag吗？如果答案是正确的，请你把答案标记为正确吗？@sagarkodte是的，但我也必须将顶部固定在内分区上，我没有
.tag-wrapper {
    position: absolute;
    top: 0px;
    left: 80px;
}

.tag {
    position: fixed;
    background: #ffcc33;
    border: 2px solid #dfa800;
    border-top: 0px;
    padding: 3px 5px;
}