位置绝对内部位置固定

Question

.parent{
position:fixed;
width:140px;
right:0; top:14px;
overflow-y:scroll;
height:140px;
background:lightgreen;
}

.btn{
position:absolute;
left:0; top:14px;
cursor:pointer;
background:gold;
}

<div class='parent'>
<div class='btn'>BUTTON</div>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
</div>

btn为什么可滚动？它是绝对定位的。

所以我需要滚动parent，但要保持btn不变。

Answer 1

使用position:sticky;的{​​{1}}

position:absolute;

.parent{
position:fixed;
width:140px;
right:0; top:14px;
overflow-y:scroll;
height:140px;
background:lightgreen;
}

.btn{
position:sticky;
left:0; top:14px;
cursor:pointer;
background:gold;
}