CSS滾動字幕置于下層是一種常見的Web設計技巧，通過設置元素的位置和層級，可以實現滾動字幕固定在頁面底部，使得頁面內容更加活躍和有趣。

/* 設置父級元素樣式 */
.scroll-wrap {
position: relative;
height: 100vh;
overflow: hidden;
}
/* 設置滾動字幕樣式 */
.scroll-text {
position: absolute;
bottom: -60px; /* 字幕高度 */
left: 0;
width: 100%;
height: 60px;
background: rgba(0,0,0,.8);
color: #fff;
font-size: 20px;
line-height: 60px;
animation: scroll 10s linear infinite;
z-index: -1; /* 置于下層 */
}
/* 滾動動畫 */
@keyframes scroll {
from {
transform: translateY(0);
}
to {
transform: translateY(60px); /* 字幕高度 */
}
}

上述代碼中，通過設置滾動字幕的position為absolute，bottom為負的字幕高度，使得字幕定位到頁面底部，同時通過z-index屬性將字幕置于下層。利用CSS動畫實現字幕的滾動效果，通過animation屬性設置動畫名稱、持續時間、時間函數和循環次數，最終實現了滾動字幕置于下層的效果。