position: fixed；吸底按钮以及吸底按钮挡住内容解决办法

最新推荐文章于 2023-12-04 18:57:51 发布
最新推荐文章于 2023-12-04 18:57:51 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： UI组件库 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fsfsdgsdg/article/details/127197102
版权

在开发中，吸底或者吸顶按钮很常见，都是通过设置position: fixed，然后控制bottom的距离来实现

 实现样式如下：

但是有的时候，这个吸底按钮可能会挡住内容，那么这个时候可以通过对其最外层的父盒子，或者自己套一个父盒子设置 padding-bottom 属性，再调整 padding-bottom 属性的值到合适位置就OK了

前端-卡布达
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现footer“吸底”效果
12-13
我们经常会遇到这样的问题：如何用css来实现底部元素可“粘住底部”的效果，对于“粘住底部”，本文有两种理解： 一是无论内容的多少，我们都希望使按钮，固定于可视窗口的底部，且内容区是可滚动的。 二是当内容区的内容较少时，页脚区不是随着内容区排布，而是始终显示在屏幕的最下方；当内容区的内容较多时，页脚能随着文档流撑开，始终显示在页面的最底部。   谈到“吸底”效果的实现，大家可能较多了解到的是sticky-footer布局，但这个方式大多是用来解决第二种情况的实现。本文将采用以下的三种方案来分别来实现以上这两种效果，并简单实现的原理以及其的适用情况。 容器（wrapper）
html 按钮吸底,VUE实现吸底按钮
weixin_39910043的博客
07-01 745
本文实例为大家分享了VUE实现吸底按钮的具体代码，供大家参考，具体内容如下{{ item }}吸底按钮export default {name: 'test',data() {return {headerFixed: false,}},mounted() {window.addEventListener('scroll', this.handleScroll)},destroyed() {wind...
1.解决使用 position: fixed；时内容被覆盖；2.vue2消除滑动条
m0_72686628的博客
06-22 1187
1.使用 position: fixed;固定定位时内容还是会被覆盖，就可以使用z-index增加层级（仅能在定位元素上奏效）2.第一步npm install less less-loader --save。第二步在App.vue中。
css特效一：文字覆盖图像悬停效果
githubcurry
11-29 1584
接下来是一个系列，就是css中常用的特效，都是css写的，在网站开发中很常用。今天来实现一个文字覆盖图像悬停效果： 鼠标停到图片上的时候： 实现原理： 1.首先设置好一个盒子包裹一个图片和文本域 2.设置一个文本，然后opacity=0隐藏起来 3.设置文本的hover效果opacity=1遮盖了图片 4.最后背景颜色和文字显示的时候可以设置一些动画效果 技术难点： 将container设置为position: relative是为了将下一级的overlay设置为position: aboslute
Css 锚点 及 锚点吸顶时盖住内容解决方法
wpf_China的博客
11-20 666
锚点： <!-- 前面设置跳转 有标记 且对应 --> <a href="#current-solve"><p>通用解决方案</p></a> <a href="#exper-center"><p>解决方案体验中心</p></a> <!-- 跳转的位置 对应id --> <div id="current-solve">这里是通用解决方案</div> <div i
解决position: fixed；遮挡其他邻近模块内容的问题
qq_44748860的博客
08-29 1403
由于位置属性值fixed的设置，导致底部button部分在文档流中不占据文档流位置，所以导致底部内容被遮挡，无法正常展示。top、margin-top的区别：（此处参考其他作者，链接：https://juejin.cn/post/6986935474635931656）因为fixed元素脱离了正常文档流，所以relative元素的原本位置向上提了，产生了覆盖的行为。来使得脱离文档流的内容在文档中占据正常的文档流空间，因此fixed属性值覆盖问题得以解决！方法一：给内容设置margin-top，
position: fixed；设置吸底按钮.挡住内容,问题解决办法
weixin_50061893的博客
09-06 1140
我们常常会有这种需求,提交按钮始终保持在手机底部。通过position: fixed搭配父盒子padding-bottom就可以做出完美的按钮吸底效果了。如果不加padding-bottom容易挡住内容的部分。
微信小程序学习之路——按钮吸底效果
机智的奎哥的博客
07-28 2080
position:fixed;// 使按钮固定于可视窗口的底部 bottom:0; left:0; right:0; height:44px;// 设置固定高度
html 按钮吸底,CSS实现footer“吸底”效果
weixin_39669701的博客
07-01 1433
我们经常或琐过系读围就网元维时一钮加近者碎提列使会遇到这样的问题：如何用css来实现底部元素可“粘住底部”的效果，对于“粘住底部”，本文分浏代刚的学过互解久点维数数请曾房总题屏断果如以气。泉公一实切式时带近享览码开时会进。,后，护据一求相子结这有两种理解：一是如算上处定面一这我作问汇u应色会进灯样近无论内容的多少，我们都希望使按钮，固定于可视窗口的底部，且内容区是功一新说讲为其年次供。发了架人据模...
解决头部使用 position:fixed； 固定定位后遮住下方内容的问题
热门推荐
最爱喝怡宝的博客
12-30 1万+
今天在做一个页面的时候，有一个效果是要让头部固定，但是在给了position:fixed; 后，继续往下写会发现下方内容有部分被头部遮住了，有两个办法可以解决这种问题 1.在头部下面给一个空的 div 给这个div设置高度，把页面撑开，这种方法是让头部刚好遮住的是这个空div，把内容放出来。 但是这种方法需要一点点调试高度，所以不推荐。 2.把整个要使用 position:fixed; 的盒子，用另一个盒子包起来 比如说我有一个头部区域，需要固定 <div class="head"&g
CSS中使用position: fixed固定定位时遮挡下方内容
最新发布
CssHero的博客
12-04 1609
通过设置padding-bottom或者z-index来解决固定定位的遮挡问题
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
主要介绍了详解iOS中position:fixed吸底时的滑动出现抖动的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
跨浏览器的实践:position:fixed 层的固定定位
10-30
一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之
css中position:fixed实现div居中上下左右居中
09-25
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看
IE6支持position:fixed完美解决方法
10-30
IE7已经支持position:fixed了，而我们的IE6呢？还继续使用js事件？消耗资源，破坏结构，画面闪耀。
IE6不兼容position:fixed属性的解决办法分享
01-21
position: fixed;这个属性用起来确实很方便，可以轻松的实现固定位置的浮动层效果。但是，它不支持IE6及以下版本。于是很多同学使用JS模拟。今天写了一个DEMO，涉及左侧、右侧。及上下两边，共四种位置的固定，与...
解决移动端 iphoneX 下吸底按钮被屏幕遮挡
qq_41206257的博客
09-07 760
<style> .div { position: absolute; bottom: 0; // 一般情况下 padding-bottom: calc(constant(safe-area-inset-bottom) + 20px); // 兼容 IphoneX padding-bottom: calc(env(safe-area-inset-bottom) + 20px) // 兼容 IphoneX } <
UI设计中关于按钮的那些事 
Mr_wangkai的博客
08-31 3543
UI设计中关于按钮的那些事 按钮在界面设计中，属于最基础的元素部分组成，按钮设计的精致，整个页面的品质也会上升不少的档次。今天给大家分享这篇文章，主要讲解在设计按钮时我们应该考虑哪些因素，包括视觉上，有哪些万能的方法及公式，能够正确的制定按钮的设计标准，来提升整个设计的系统性。 按钮有哪些作用？ 在设计按钮之前，需要先理解按钮起到的代表含义。什么地方该加按钮，什么地方不加按钮，在系统化设计思路中需要非常有讲究。通常按钮在页面，主要起到以下三点作用： 1、某一类型的功能操作 这种比较常见，如一.
锚点定位被顶部固定导航栏遮住的解决方案
Scar的博客
04-12 4441
很多网站都有一个固定在上方的导航栏，方便用户搜索和跳转到其他页面。 同时为了方便用户浏览长文档，都会加上目录，点击段落标题跳转到段落所在的位置， 如图所示： 如果使用锚点实现目录的跳转，会遇到 fixed 导航栏遮住了标题的问题。 1. 锚点定位机制 如果没有滚动条，锚点失效。 如果有滚动条，滚动条滚动到地址 hash （地址 # 号后面的内容）对应的锚点元素padding-box上边缘位置...
css 按钮 悬浮底部居中
09-29
要实现CSS按钮悬浮在底部并居中，可以按照以下步骤进行操作： 1. 在HTML文件中创建一个按钮元素，可以使用```<button>```标签或者其他适当的标签，例如```<a>```标签。 2. 使用CSS选择器选中该按钮元素，并应用以下样式： - 使用```position: fixed;```将按钮的定位方式设置为固定定位，使其悬浮在页面上方。 - 使用```bottom: 0;```将按钮的底部与页面底部对齐。 - 使用```left: 50%;```将按钮的左边缘与页面左边缘形成垂直居中的偏移。 - 使用```transform: translateX(-50%);```将按钮向左平移自身宽度的一半，使其水平居中。 3. 根据需要，还可以为按钮添加其他样式，例如背景色、文本颜色等。 以下是一个示例代码： HTML： ``` <button class="floating-button">点击按钮</button> ``` CSS： ``` .floating-button { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); background-color: #ff0000; color: #ffffff; padding: 10px 20px; border-radius: 5px; text-decoration: none; } ``` 以上代码将会使按钮悬浮在页面的底部并水平居中，背景色为红色，文字颜色为白色，按钮有一定的内边距和圆角边框。可以根据需要自行调整样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值