实现这样的效果需要用到CSS的定位属性position和bottom。首先,将要上移的元素的定位属性设置为绝对定位,然后通过bottom属性将其向上移动一定的距离。比如,下面的例子将底部的元素上移了100px:
.bottom-element { position: absolute; bottom: 100px; }
如果想要让底部元素上移并且居中,可以使用transform属性。具体来说,设置元素的定位属性为绝对定位,然后将left和top属性均设置为50%,再使用transform: translate(-50%, -50%)将元素向左上方移动自身宽高的一半,即可达到底部元素上移到中间的效果。下面是代码:
.bottom-element { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, -50%); }
值得注意的是,如果要实现底部元素上移的效果,需要保证它的父元素高度为100%。否则,元素会被顶出父元素的范围,达不到上移的效果。