.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可滚动?它是绝对定位的。

所以我需要滚动parentbtn保持不变。

最佳答案

使用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/

10-17 02:27