CSS固定兩行是一種較為常見的布局方式,可以實現在頁面中固定某兩行元素的位置而不受滾動條的影響。下面將介紹有關CSS固定兩行的一些常見方法。
/* 方法一:position: fixed */
.top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
}
上方代碼使用了position: fixed屬性,將兩個元素的位置固定在頁面上。設置top: 0和bottom: 0可以將兩個元素固定在頁面頂部和底部,而width: 100%和height:50px則可以設置元素的寬度和高度。
/* 方法二:position: sticky */
.top {
position: sticky;
top: 0;
}
.bottom {
position: sticky;
bottom: 0;
}
上方代碼使用了position: sticky屬性,可以讓元素在其父容器內滾動到一定位置時固定在該位置上。設置top:0和bottom:0可以使元素分別固定在頁面的頂部和底部。
除了上述方法,還可以使用JavaScript實現CSS固定兩行的效果。通過監聽滾動事件,實時計算和修改元素的位置,從而達到固定兩行元素的效果。
上一篇css 固定右上角