为什么使用固定定位还有盒子内容显示在上方！！！

最新推荐文章于 2024-11-10 08:00:00 发布
最新推荐文章于 2024-11-10 08:00:00 发布
阅读量895 收藏
点赞数
分类专栏： ui 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43408070/article/details/111948724
版权
博主分享了一个关于CSS布局的常见问题，通过设置固定定位盒子的背景颜色解决了一个困扰一上午的问题。建议在margin不起作用时尝试使用padding，并推荐使用百分比单位以实现响应式设计。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

只需要把固定定位的那个盒子背景颜色设置为白色就行了，害我搞了一上午…
还有如果使用margin不行的话 那就用padding 啊
最好是百分比

导航栏用了固定定位,下面的盒子会显示不全
aiyayaya_的博客
11-28 2703
在写网站时,经常会遇到导航栏设置了固定定位后,下面的盒子就会被盖住一部分 最主要的原因是: 设置了固定定位的盒子会脱离文档流 可以看到滑动滚轮条的时候,下面的内容是在导航条下面盖住的 解决方法: 在这个被盖住的盒子里加一个margin-top:50px (值是导航条的高度) 设置了外边距后就可以看到效果了 代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8">
固定定位的使用
Always_Love的博客
11-06 2452
在网页中会有一些样式需要用到固定定位，对于它的使用，我们来作以练习。 一、介绍 固定定位的标签语句为：position：fixed； 和其他定位方法一样，都是需要先在父级元素进行相对定位，然后才能定位到想要定位的地方。 配合使用图层级数来使定位显示的效果更好，图层级数：z-index：n； 还有一些小技巧： 溢出省略号： overflow:hidden; text-overflow:eclipse...
如何让固定定位的小盒子一直贴着版心(算法)
冲冲冲冲
03-14 414
不管版心多大，不管浏览器如何缩放，都不会影响小盒子在版心的旁边具体使用方法，例如就像电商网站旁边的楼层跳转，还有一些二维码的小提示 *{ margin: 0; padding: 0; } .bx{ width: 1000px; height: 1150px; background-color: orange; margin: 0 a
关于绝对定位的类目莫名其妙跑到app最上面的问题
qq_34471916的博客
12-20 217
其实是因为其往上走第一个父元素必须是position：relative，不然会一直往上索引
定位后，下面的元素（跑上来）占了上面元素的位置怎么办？
weixin_42220130的博客
09-17 4149
<div class="box"> <div class="img"></div> <div class="title">标题文字</div> </div> //样式 .box{position: relative;} .img{width: 100%; height: 120PX; positio...
先创建一个盒子固定在底部，怎么实现uniapp弹出键盘时这个固定在底部的盒子出现在键盘的上方
04-26
首先，在页面中添加一个固定在底部的盒子，并将其定位为fixed或absolute。然后，使用uniapp提供的onKeyboardHeightChange事件来监听键盘高度的变化，并通过修改底部盒子的位置来使其出现在键盘上方。具体的代码实现...
css固定一个div块，固定定位，要固定在一个位置，上面盒子变化这个不会变化
05-31
要实现固定定位的div块，可以使用CSS中的position属性，将其设置为fixed。同时，可以使用top、bottom、left、right属性，来指定div块相对于浏览器窗口的位置，从而达到固定在一个位置的效果。例如： ``` ...
使用固定定位标签重叠在一起怎么解决?
07-20
在使用固定定位标签时，重叠在一起可能会导致布局混乱。解决这个问题的一种常见方法是使用 z-index 属性来控制元素的层叠顺序。 z-index 属性用于指定元素的层叠顺序，具有较高 z-index 值的元素将覆盖具有较低 z-...
掌握【object-fit】&【object-position】，让图片完美填充盒子！
最新发布
在逃小屁王的博客
11-10 782
工作中你可能会遇到这样的场景，类似下面某音乐的推荐歌单，该区域有着固定大小和数量的盒子，盒子中展示的图像（由 img 标记）每天都会实时更新 那么，如何实现无论上传的图像尺寸是多少，都可以完美适配盒子模型，且展现的是图像的中心内容？ 通过对object-fit两个关键字的介绍和对比，还有示例演示，总结得出：如果想要实现导入和示例中的图像填充效果，请选择cover关键字
WEB前端-定位
syh_SYH0321的博客
10-26 1907
定位的使用：1.4种定位方式：静态、相对、绝对、固定2.4种边偏移属性：left、right、top、bottom注意：偏移值准确的理解是“距离什么位置有多少像素”。如 top:100px;距离顶部为100像素 （向下走）
vant Tab 标签页 切换
weixin_65635437的博客
05-25 1394
vant Tab 标签页 切换
vant 固定定位不生效
qq_32261717的博客
08-20 1565
vant的tabbar和顶部搜索固定定位不生效
移动端vant+vue2 tab页切换时底部固定部分会被手机键盘弹起问题
weixin_48494231的博客
01-04 1311
3.在watch监听获取到的b，若b
CSS 定位叠放次序（z-index）及 定位其他拓展
qq_43623147的博客
12-12 431
定位叠放次序 z-index 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序。 语法： 选择器 { z-index: 1; } 数值可以是正整数、负整或0，默认是auto，数值越大，盒子越靠上。 如果属性值相同，则按照书写顺序，后来居上。 数字后面不能加单位。 只有定位的盒子才有z-index属性。 定位的其他拓展 一、绝对定位的盒子居中 加了绝对定位的盒子不能通过 margin: 0 auto 水平居中，但是可以通过以下计算方法实现...
前端-盒子模型与元素显示类型
wwx1239021388的博客
08-19 848
对前端页面布局最基本的模型-盒子模型的全方面详细的讲解
web前端基础（三）
qq_50799537的博客
04-21 540
CSS（三） 文章目录web前端基础（三）一、前言二、具体内容.CSS web前端基础（三） 本文仅是学习过程中的简略笔记，如有错误，烦请指正。 提示：以下是本篇文章正文内容，下面案例可供参考 一、前言 css设置网页元素的外观样式，行为 二、具体内容 .CSS 定位： 定位模式+边偏移 边偏移： 顶端边偏移：top: ___px 元素与其父亲上边线的距离 底部偏移量：bottom：___px 左侧偏移量：left： 右侧偏移量：right： 定位模式： 选择器{ position：属性值；} St.
html导航栏固定在顶部,将导航栏始终固定在窗口顶部:
weixin_26845891的博客
06-09 1万+
代码实例固定在窗口顶部*{padding:0px;margin:0px;}body, ul, li{background-color:white;font-size:12px;font-family:Arial, Helvetica, sans-serif;text-align:center;}#main{width:20px;height:1000px;margin:0px auto;backg...
解决头部使用 position:fixed； 固定定位后遮住下方内容的问题
热门推荐
最爱喝怡宝的博客
12-30 1万+
今天在做一个页面的时候，有一个效果是要让头部固定，但是在给了position:fixed; 后，继续往下写会发现下方内容有部分被头部遮住了，有两个办法可以解决这种问题 1.在头部下面给一个空的 div 给这个div设置高度，把页面撑开，这种方法是让头部刚好遮住的是这个空div，把内容放出来。 但是这种方法需要一点点调试高度，所以不推荐。 2.把整个要使用 position:fixed; 的盒子，用另一个盒子包起来 比如说我有一个头部区域，需要固定 <div class="head"&g
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值