css按钮定位在div底部

简介: css按钮定位在div底部

如图,黄色按钮沉在div底部:

  

 


这种场景会经常遇到,比如头部固定,底部固定,或者侧边栏固定等,虽然很简单,但是好记性不如烂笔头,作为一个后端开发,在转全栈的路上css还是有点蛋疼的。


#dataExplain {
        position: fixed;
        background-color: white;
    }
    .dataExplainBtn {
        width: 100%;
        position: absolute;
        bottom: 0px;
        transform: translateX(-50%);
    }

如上代码便可,父级div给个定位,子级按钮再给个绝对定位就可。这里我父级div给的固定定位是结合我自己的业务需求,不一定非要设置为固定定位,父级div设置为固定定位也是起效的。


css没啥特别好说的,bottom和transform两个属性的作用是让按钮沉底并居中。


以上。

 

PS:楼主邮箱 tccwpl@163.com

目录
打赏
0
0
0
0
3
分享
相关文章
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
126 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
72 21
|
3月前
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
33 1
|
4月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
39 0
最新CSS3定位元素
【8月更文挑战第28天】
46 5
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
css中使用定位实现吸顶效果
css中使用定位实现吸顶效果
122 2
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等