.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
保持不变。 最佳答案
使用position:sticky;
代替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;
}
<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>
关于html - 位置绝对内部位置固定,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51537274/