e度空间 2020-04-30
如图,黄色按钮沉在div底部:
这种场景会经常遇到,比如头部固定,底部固定,或者侧边栏固定等,虽然很简单,但是好记性不如烂笔头,作为一个后端开发,在转全栈的路上css还是有点蛋疼的。
#dataExplain { position: fixed; background-color: white; } .dataExplainBtn { width: 100%; position: absolute; bottom: 0px; transform: translateX(-50%); }
如上代码便可,父级div给个定位,子级按钮再给个绝对定位就可。这里我父级div给的固定定位是结合我自己的业务需求,不一定非要设置为固定定位,父级div设置为固定定位也是起效的。
css没啥特别好说的,bottom和transform两个属性的作用是让按钮沉底并居中。
以上。
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT