![](/img/trans.png)
[英]How to Make a Fixed Element Stay Relative to the Current Top Scroll Position?
[英]How to have fixed position of element but relative to container
我有一個容器,左側和右側有 2 個按鈕,中間有文本。 我希望文本滾動,同時 2 個按鈕固定在容器底部,如下圖所示。
但我希望卷軸在外容器上。 已附上下面的 html 和 css 代碼。
此外,當線條小於容器的高度時,按鈕仍應貼在容器的底部。
請幫忙。
PS:標記和css都可以更改。
.container { width: 400px; height:200px; border: 1px solid; position:relative; overflow:auto; margin-bottom:4rem; } .line { height:8px; width:100%; background-color: grey; border-radius: 8px; margin-bottom:20px; } .text{ padding: 5px 50px; } .button-wrapper{ position: absolute; bottom: 4px; } .button{ width:32px; height:32px; background-color:orange; } .left { left:4px; } .right{ right:4px; }
<div class="container"> <div class="button-wrapper left"> <div class="button "></div> </div> <div class="text"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="button-wrapper right"> <div class="button "></div> </div> </div>
如果您被允許更改標記,這是一個解決方案:
將兩個按鈕放在一個包裝器中:
<div class="button-wrapper">
<div class="button left"></div>
<div class="button right"></div>
</div>
添加position: sticky
到您的.button-wrapper
.container { width: 400px; height:200px; border: 1px solid; position:relative; overflow:auto; margin-bottom:4rem; } .line { height:8px; width:100%; background-color: grey; border-radius: 8px; margin-bottom:20px; } .text{ padding: 5px 50px; } .button-wrapper{ position: sticky; bottom: 4px; } .button-wrapper:after { content:''; display: table; clear: both; height: 0; } .button{ width:32px; height:32px; background-color:orange; } .left { float: left; margin-left: 4px; } .right{ float: right; margin-right: 4px; }
<div class="container"> <div class="text"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="button-wrapper"> <div class="button left"></div> <div class="button right"></div> </div> </div>
將您的內容包裝在 div 中並修改 css 對我有用。 工作示例
.container { width: 400px; height: 200px; border: 1px solid; position: relative; overflow: hidden; margin-bottom: 4rem; } .line { height: 8px; width: 100%; background-color: grey; border-radius: 8px; margin-bottom: 20px; } .text { max-height: 190px; overflow: auto; position: relative; } .content-div { width: 334px; margin: 0 auto; } .button { width: 32px; height: 32px; background-color: orange; display: inline-block; position: absolute; bottom: 0; } .left { left: 0; } .right { right: 0; }
<div class="container"> <div class="text"> <div class="content-div"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="button-wrapper"> <div class="button left"></div> <div class="button right"></div> </div> </div>
這是使用 CSS grid 和position:sticky
想法,您可以在其中保留標記
.container { width: 400px; height:200px; border: 1px solid; overflow:auto; display:grid; grid-template-columns:auto 1fr auto; /* 3 columns */ margin-bottom:4rem; } .line { height:8px; background-color: grey; border-radius: 8px; margin-bottom:20px; } .text{ padding: 5px 50px; } .button-wrapper{ position:sticky; bottom:5px; margin: auto 5px 5px; /* auto will push the element to the bottom*/ } .button{ width:32px; height:32px; background-color:orange; }
<div class="container"> <div class="button-wrapper"> <div class="button "></div> </div> <div class="text"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="button-wrapper "> <div class="button "></div> </div> </div> <div class="container"> <div class="button-wrapper"> <div class="button "></div> </div> <div class="text"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="button-wrapper "> <div class="button "></div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.