踩坑系列之position:fixed和position:relative的冲突

本文介绍了一种在页面中调整元素定位方式以确保上拉时搜索框固定且不会遮挡下方内容的方法。通过取消item组件的相对定位解决了该问题。
部署运行你感兴趣的模型镜像

如下图 一开始item组件有一个相对定位

这样子上拉的时候 搜索框固定了 下面却有item的东西

解决方法:将item的相对定位取消

.item {
    display: flex;
    justify-content: space-between;
    /* position: relative; */
    margin-top: 20rpx;
}

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰(StepFun)与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量,支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是,它可以生成多种语言的歌曲,包括但不限于中文、英文、日文等19种语言

### `position: fixed``position: absolute`的区别 #### 定位参考点 - `position: fixed`:元素会相对于浏览器窗口进行定位。无论页面如何滚动,元素都会固定在浏览器窗口的某个位置。例如,网页底部的固定导航栏,无论用户滚动到页面的哪个位置,导航栏始终显示在底部。 - `position: absolute`:元素会相对于最近的已定位祖先元素(即`position`值不为`static`的祖先元素)进行定位。如果没有已定位的祖先元素,则相对于`<html>`元素定位。在让`td`里的`div`二维码内容悬浮外面的场景中,若`td`设置了`position: relative`,则`div`会相对于该`td`进行定位。 #### 对文档流的影响 - `position: fixed`:元素会脱离正常的文档流,不再占据页面中的空间。其他元素会忽略该元素的存在,就好像它不存在于页面中一样。 - `position: absolute`:同样会使元素脱离正常的文档流,周围的元素会重新布局,就好像该元素不存在一样。 #### 滚动行为 - `position: fixed`:元素不会随着页面的滚动而移动,始终固定在浏览器窗口的指定位置。 - `position: absolute`:元素会随着包含它的已定位祖先元素的滚动而移动。如果祖先元素没有滚动,而页面滚动,元素也会跟着页面滚动。 ### 应用场景 #### `position: fixed` - 固定导航栏:如网页顶部或底部的导航栏,始终显示在浏览器窗口的特定位置,方便用户随时访问导航功能。 - 侧边栏广告:在页面滚动时,广告始终固定在侧边,吸引用户的注意力。 #### `position: absolute` - 下拉菜单:当鼠标悬停在某个菜单选项上时,下拉菜单以绝对定位的方式显示在菜单选项下方,不影响其他元素的布局。 - 图片上的文字说明:在图片的特定位置添加文字说明,通过绝对定位将文字放置在图片上的合适位置。 ### 在`td`中`div`悬浮不受同`tr`其他`td`长度影响的应用 在该场景中,使用`position: absolute`更为合适。通过将`td`设置为`position: relative`,将`div`设置为`position: absolute`,可以让`div`相对于`td`进行定位,从而悬浮在`td`外面,不受同`tr`其他`td`长度的影响。示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QR Code in TD</title> <style> table { border-collapse: collapse; } td { border: 1px solid #ccc; padding: 10px; position: relative; } .qr-code { width: 100px; height: 100px; background-color: #eee; position: absolute; top: 0; left: 100%; z-index: 1; } </style> </head> <body> <table> <tr> <td> <div class="qr-code"> <!-- 这里可以放置二维码图片或生成二维码的代码 --> QR Code </div> 这是单元格内容 </td> <td>其他单元格内容</td> </tr> </table> </body> </html> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值