我按照一些教程創建了一個基於CSS的浮動滾動到頂部按鈕。然而,我注意到最後一個HTML元素(例如最後一行)下面有額外的空白空間。額外的空白空間的高度與我的按鈕高度(50px)相符。
我還嘗試添加一個額外的div標籤來封裝arrowUp div標籤,間隙減少了,但仍然有一些較小但明顯的空白空間。
我想知道是否有一種方法可以避免額外的空白空間?
#arrowUp { position: sticky; width: 50px; bottom: 120px; background: #699462; border-radius: 10px; aspect-ratio: 1; margin-left: auto; margin-right: 20px; // margin-bottom: 150px; } #arrowUp a { content: “”; position: absolute; inset: 25%; transform: translateY(20%) rotate(-45deg); border-top: 5px solid #fff; border-right: 5px solid #fff; }
前>第一行。
最後一行。
>
我認為在你的情況下,最好使用
position: fixed;
而不是sticky
。請注意,你需要設定right: 0;
來將「按鈕」定位在螢幕的右邊緣。或者,你可以設定right: 20px;
並刪除margin屬性。快速解釋
「額外的空白」之所以存在,是因為使用
sticky
時,元素被定位到文件的正常流程中。這就像使用position: relative;
並設定top: -20px
一樣-元素會向上移動20px,但原始空間被保留,因為它「停留」在文件流中。而使用position: fixed;
會將元素從文件流中取出。我建議閱讀關於CSS中的文檔流和定位的相關內容: