css 使用固定定位position: fixed；后遮住下方的元素（贴底之后不能被撑下去）

最新推荐文章于 2022-10-07 16:59:00 发布
最新推荐文章于 2022-10-07 16:59:00 发布
阅读量4.3k 收藏 5
点赞数 2
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DSs1206/article/details/121801393
版权

        当你将一个元素贴底之后发现该元素不会被呢容撑下去 但是确实是贴了底 

这样的话就会导致我们的内容被遮挡

最简答的方法就是给添加了fixed这个属性的元素外层添加一个div 

其高度与fiexd元素等高就解决了 

一个混子罢了
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css-移动端解决底部fixed定位，挡住一部分内容
qq_32838979的博客
01-03 1万+
移动端底部内容fixed定位挡住部分内容 在开发移动端页面时，经常出现的一种布局是在浏览器底部固定一个盒子，设置固定定位fixed，但是会出现这个固定定位的盒子压住上文的内容的情况，详细看下图： 蓝色的底部固定栏挡住了部分产品的内容。 这里我的底部固定栏的高度设置为8%，代码如下： <!-- html部分--> <div class="main"> <img src="1.jpeg" alt="" class="image"> </div> <
CSS中使用position: fixed固定定位时遮挡下方内容
最新发布
CssHero的博客
12-04 2449
通过设置padding-bottom或者z-index来解决固定定位的遮挡问题
【vue】vue 解决position:fixed 遮盖下方元素问题
Meditation_Crazy
06-13 2271
前言 转载自：https://blog.csdn.net/weixin_40425415/article/details/111595120
绝对定位中的fixed遮挡元素解决办法
热门推荐
想快快长大的博客
08-16 1万+
图片.png 底部的fixed被遮挡了 怎么解决呢 在外面套层div 然后加个height的高度 就可以了 图片.png 图片.png 图片.png
el-table使用fixed后，最后一行被遮挡
s_156的博客
07-07 2982
el-table使用fixed后，最后一行显示不全；el-table设置fixed后，最后一行被遮挡
幻灯片挡住CSS导航下拉菜单或者飘浮广告的解决方法
09-25
如果你希望幻灯片位于所有其他元素的下方，你可以为幻灯片的外层容器（通常是`div`）添加CSS样式： ```css 幻灯片容器 { z-index: -100; position: relative; } ``` 这样，幻灯片会被其他设置了更高`z-index`的...
header导航菜单固定 当页面往下拉时固定导航
09-25
在网页设计中，一个常见的需求是创建一个在页面滚动时始终保持在顶部的固定导航菜单，这种效果被称为“固定导航”或“固定菜单”。这有助于用户在浏览长页面时轻松访问各个主要链接，提高用户体验。本篇文章将详细...
HTML实现遮罩层的方法 HTML中如何使用遮罩层
09-28
在提供的代码中，可以看到一个`<div>`元素被赋予了`id="overlay"`，这个元素就是我们的遮罩层。为了使其具有遮罩效果，我们需要在CSS中定义其样式。例如： ```css #overlay { position: fixed; top: 0; left: 0;...
完美解决手机网页中输入框被输入法遮挡的问题
11-27
之前要做一个弹出对话框，填写信息，发现在手机上看的时候，较后的输入框在填写信息时，输入框被输入法遮挡，只能盲填。 前提 1.弹出的对话框用display:fixed定位的 2.对话框大小固定 解决办法 css部分 （dlg-top与...
解决下拉菜单被iframe遮住问题
07-28
在网页设计中，下拉菜单经常用于实现导航或者...总之，解决下拉菜单被`iframe`遮住的问题通常涉及调整`z-index`、重新定位元素或使用JavaScript进行动态调整。根据具体场景选择合适的方法，可以有效地解决这类问题。
css锚点定位被顶部固定导航栏遮住的解决方案
11-21
很多网站都有一个固定在上方的导航栏，方便用户搜索和跳转到其他页面。 同时为了方便用户浏览长文档，都会加上目录，点击段落标题跳转到段落所在的位置， 如图所示： 如果使用锚点实现目录的跳转会遇到 fixed 导航栏遮住了标题的问题。 1. 锚点定位机制 如果没有滚动条，锚点失效。 如果有滚动条，滚动条滚动到地址 hash （地址 # 号后面的内容）对应的锚点元素padding-box上边缘位置。 2. 解决方案 示例 示例源码 示例在线预览 （1）padding+margin padding影响锚点元素的定位，margin不影响锚点元素的定位。所以使用padding调整锚点元素跳转后的位置，使
关于h5页面苹果手机使用fixed定位tabbar最底部时遮挡内容问题
qq_40011214的博客
07-12 5022
在使用uni-app时，自己写了个底部tabbar导航栏，出现了tabbar遮挡内容的问题，如下图所示； 刚开始的时候，使用了顶部盒子padding-bottom 来时底部盒子撑开，但是在chrome浏览器中查看，效果无误 但是呢！！！ 当任务数据一旦多了之后，还是会有遮挡问题，并且遮挡问题在ios也就是苹果手机上的浏览器中打开没有实现想要的效果； 百度多次查询文档，并没有发现可行的办法，最后是在微信的技术群里提出的问题，还好啊，三个技术群就一个正八经的能给你解答问题的，剩下的都是叫你去百.
css解决使用固定定位导致下方元素上移到固定定位元素的位置
黑帽子技术的博客
10-07 2482
问题描述 固定定位相对于视口定位，如果上方有一个div元素，开启固定定位以后，这个div就会脱离文档流（“漂浮走了”），那么原来的这个div所占据的位置，就会空出来，就会导致下方的div元素蹿升上来。就会导致布局的紊乱。解决方式...
导航栏用了固定定位,下面的盒子会显示不全
aiyayaya_的博客
11-28 2545
在写网站时,经常会遇到导航栏设置了固定定位后,下面的盒子就会被盖住一部分 最主要的原因是: 设置了固定定位的盒子会脱离文档流 可以看到滑动滚轮条的时候,下面的内容是在导航条下面盖住的 解决方法: 在这个被盖住的盒子里加一个margin-top:50px (值是导航条的高度) 设置了外边距后就可以看到效果了 代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8">
css div固定底部 并且不遮挡其他元素
rj2017211811的博客
02-10 9822
问题：设置固定底部的div后会遮挡其他元素 解决方法:为该固定在底部的div设置一个height，position设置为fixed， 然后给body设置一个margin-bottom，大小为该固定在底部的div的height ...
微信小程序 底部按钮(position: fixed；)遮挡列表内容问题
@微你
03-25 3555
问题描述： 当页面数据接近或超过一页的时候，页面底部的固定按钮会遮挡一部分内容，导致内容显示不全，如下图：(列表的最后一个item的删除和更换按钮被底部固定的按钮遮住了) 解决方法： 在列表下边加一个盒子，给这个盒子一个高度，高度大于等于底部按钮的高度 <template> <view class="goodsList"> <view class='list'> <view class="recommend-item" v-for="(item,
position:fixed 绝对定后后,父元素没有高度如何解决
sunluyi的博客
03-15 1679
一种: 直接对没有高度的元素家 padding-top， 有点旁门左道的感觉。实现快。二种: 外层nav必须加高度, 用里边class来绝对定位。解决父元素没有高度的问题。更多CSS小技巧查看：孙鲁意博客网站...
display 垂直居中
bangxionger9224的博客
06-12 283
/* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-co...
position：fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法
yh8899abc的博客
04-27 2504
最近vue项目中为了使header与sidebar部分固定不动，只有main主体部分内容滚动，于是给main部分加上了固定定位position：fixed，overhidden：scroll .app-main { height: 100%; position: fixed; overflow: scroll; } 导致main主体部分子元素dialog弹出框被遮罩覆盖的...
css 滚动条第一行固定不动
08-22
要实现CSS滚动条中的第一行固定不动，可以使用以下方法之一： 方法一：使用padding和overflow属性 1. 首先，隐藏body元素的滚动条，可以通过设置`overflow: hidden`来实现。 2. 接下来，让滚动内容垂直滚动，可以将主要内容区域的overflow-y属性设置为scroll。 3. 最后，为了预留出滚动条的宽度，将主要内容区域的右侧间距padding-right设置为滚动条的宽度。根据操作系统的不同，可以设置不同的数值。 方法二：使用CSS伪元素和overflow属性 1. 首先，隐藏浏览器的默认滚动条，可以使用`::-webkit-scrollbar`伪元素，并将其display属性设置为none。对于其他浏览器，可以使用`scrollbar-width`和`-ms-overflow-style`属性来隐藏滚动条。 2. 接下来，将主要内容区域的overflow-x属性设置为hidden，以隐藏水平滚动条，将overflow-y属性设置为auto，以实现垂直滚动。这样，只有垂直滚动条会显示出来。 无论使用哪种方法，都要注意以下几点： - 如果菜单固定在顶部不动，可以使用`position: fixed; top: 0; left: 0;`来实现。 - 同时，要注意将下方列表下移相应的位置，以避免菜单遮住一部分下方列表内容。 - 另外，为菜单设置背景，以防止透明的菜单与下方列表滚动上来的内容重叠。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [CSS实现内容可以滚动，不显示滚动条](https://blog.csdn.net/mufabixin/article/details/130792763)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [CSS实现导航固定的、左右滑动的滚动条制作方法](https://download.csdn.net/download/weixin_38602189/13128342)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值