如何修复位置为粘性的块的叠加

Question

该元素停留在顶部，但是通过滚动可以看到一个叠加层。如何修复带有相同覆盖层的按钮的块。

.wrapper {
    display: inline-flex;
    margin: 5px;
    max-width: min-content;
}


<div style="background: #3989c9; position: sticky; top: 0; left: 0;">
    <p>text</p>
    <div style="margin: 10px;"><input id="btn_transfer_checkbox" type="button" value="Перенести"> 
</div>
</div>


<div>
    <div class="wrapper">
    ...
    </div>
</div>

Answer 1

根据Alon Eitan的评论。

您需要比其他元素高position的{​​{1}}和sticky。而且您不会忘记z-index的价值。

background

.wrapper {
    display: inline-flex;
    margin: 5px;
    max-width: min-content;
}

.header_library{
    background: #ffffff; 
    position: sticky;
    z-index: 1;
    top: 0; 
    left: 0; 
    height: 80px;  
    margin: 0; 
    padding: 0;
}

.row{
  display: flex;
  align-items: center; 
}