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

最新推荐文章于 2023-08-29 14:37:30 发布

原创最新推荐文章于 2023-08-29 14:37:30 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

踩坑系列专栏收录该内容

10 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

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

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

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

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

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

ACE-Step

音乐合成

ACE-Step

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Koki~

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css中position:relative和overflow:hidden之间的问题

09-25

`position`属性用于定义元素的定位模式，它有多种值，如`static`（默认值）、`relative`、`absolute`、`fixed`和`sticky`。当`position`设置为`relative`时，元素保持其正常流中的位置，但可以通过`top`和`left`等...

position:fixed或absolute时百分比参考屏幕宽度

09-25

position属性的值通常可以是static、relative、absolute、fixed以及后来新增的sticky。当使用position:fixed或position:absolute的时候，元素的定位将会脱离常规文档流，而此时如何设置元素的宽度和位置就变得稍微...

参与评论您还未登录，请先登录后发表或查看评论

position: relative;和position: absolute;冲突问题

zgwnDong的博客

07-29

748

在做小程序项目的时候，发现使用定位后页面和自己想的不一样，后来发现定位顺序这样会冲突： position: absolute; position: relative; 把顺序掉一下就没问题了： position: relative; position: absolute; ...

父级position：fixed 子级overflow显示不全问题

weixin_46700289的博客

02-08

717

position和overflow显示不全内容问题

css position定位会被继承吗,关于css position: absolute、relative定位问题

weixin_39639260的博客

08-04

1928

position 属性规定元素的定位类型。属性定义position值：absolute、fixed、relative、static(默认值。没有定位，元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index声明)。)、inherit(规定应该从父元素继承position 属性的值)absolute、fixed、relative介绍TRBL属性(TOP、...

position中relative，absolute，fixed的区别与运用

badoldboy的博客

08-29

1383

1.如何在页面中画个三角形，这个功能很常用，很多页面都有。比如这种。都可以通过这个方法实现。画一个三角形先创建一个空标签，设置边框，边框的粗细由三角形的长度决定，就相当于用边框画了一个正方形，这个正方形由四个方向的三角形组成，把边框的颜色设置透明色，在页面中有一个看不见的正方形，我们需要哪个方向的三角形，就给哪个方向设置颜色。 eg：p {border:10px solid transparent； border-top-color:red;} 三角形画好了，一般都是通过定位把它设置在想要的位置

关于position:relative absolute fixed定位和布局的踩坑心得

英俊帅比林的博客

09-21

1万+

position属性介绍 absolute 顾名思义，这是绝对定位的意思，我们在使用时通常都是给元素声明了position:absolute属性，然后再用top,left,right,bottom属性去改变元素的位置，语法示例如下： position:absolute; top:10px; 该语句设置了定位方式为absolute,并且向下偏移了10px relative relative是相对定...

static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)

热门推荐

qq_44939011的博客

07-20

1万+

static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静

精选资源

CSS中如果固定定位只给出了定位模式position:fixed,没给出边位移引发的问题

01-20

定位涉及到`position`属性，它有多个值，如`static`、`relative`、`absolute`和`fixed`。本篇文章将重点讨论在使用`fixed`定位时只指定`position: fixed`而忽略边位移所引发的问题。首先，我们需要理解定位的基础...

css中position:fixed实现div在窗口上下左右居中

09-25

通过position属性，我们可以控制元素的位置关系，常见的定位属性值包括static、relative、absolute和fixed等。其中，position:fixed是一种特殊的定位方式，它可以使元素相对于浏览器窗口进行定位，而与文档流无关，...

CSS中的position:relative;的作用示例介绍

12-10

在你的问题中，你特别关注了`position:relative;`的作用，这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`以及与之相关的其他定位方式。首先，我们来看`position`属性的四种主要值： 1. **...

“fixed+relative≈≈absolute”——对BFC的再次思考

weixin_30644369的博客

01-01

好久没写博客了，刚好今天跨年夜没约到什么妹子，在家宅着不如写点东西好了。需求昨天晚上，给公司年会做一个移动端的投票页面，遇到一个UI优化的问题： · 正文内容少于一屏时，投票提交按钮固定显示在页面底部（如图一）· 正文内容多于一屏时，投票提交按钮，跟随内容，流式显示在内容下面（如图二）附图：以前做一些管理后台的时候，底部的版权信息声明就是这样的UI需求，实现思路大概就...

CSS-position:absolute,relative,static,fixed,sticky属性用法

qq_50767141的博客

04-10

469

CSS position 类型 static relative absolute fixed sticky static 是html的默认值，对于top, right, left, bottom等设定值不会生效下面代码设定了盒子（box） position类型static none为未定义类型的position（这是为了证明static为html默认值）下面为结果测试值： position类型absolute absolute定义为左上角开始利用top，bot

前端CSS中position（定位样式）中有3个方法fixed，relative，absolute

weixin_41987434的博客

06-18

1023

前端CSS中position（定位样式）中有3个方法fixed，relative，absolute

解决position: fixed；遮挡其他邻近模块内容的问题

qq_44748860的博客

08-29

3078

由于位置属性值fixed的设置，导致底部button部分在文档流中不占据文档流位置，所以导致底部内容被遮挡，无法正常展示。top、margin-top的区别：（此处参考其他作者，链接：https://juejin.cn/post/6986935474635931656）因为fixed元素脱离了正常文档流，所以relative元素的原本位置向上提了，产生了覆盖的行为。来使得脱离文档流的内容在文档中占据正常的文档流空间，因此fixed属性值覆盖问题得以解决！方法一：给内容设置margin-top，

简单说一下CSS的position常用的三个属性：relative,absolute以及fixed,以及嵌套使用的一个常见情况

蘑菇猎手的专栏

06-01

8112

首先要清楚，position需要top,bottom,left,right来配合实现定位，当然根据实际情况，不必要把四个方向的定位全写出来。举个例子。 position:absolute; top:10px; bottom:10px; left:10px right:10px 接下来就要分别介绍position属性的不嵌套使用（即该元素中没有子元素使用position），和

认识position：fixed/absolute/relative

HZ___ZH的博客

12-18

588

1.position: relative 相对定位，不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。 2.position:static 正常流（默认值），不能通过z-index进行层次分级。(设置left等无效) 3.position:absolute 绝对定位，脱离文档流的布局，子元素脱离文档流，可导致父元素无法被撑开，遗留下来的空间由后面的元素填充。通过 top,bottom,left,right 定位，定位的起始

position属性absolute与relative 详解不为人知的（fixed）绝对定位(fixed相对于浏览器窗口=不动的div)

服务好姐qa

12-02

9773

From：http://www.cnblogs.com/wiseblog/articles/4352007.html 总结：当一个标签打上position：absolute绝对标签后，当我们使用TRBL属性时，他所参照的对象是带有absolute或relative标签的父级（无限），如果所有父级都没有absolute或relative打上标签，则以BODY左上角点为参照（一句

CSS div 设置positon:relative之后，再设置top,div的原位置有空白，解决办法

weixin_46513796的博客

07-29

557

今天写东西发现了这个问题视频上一个可以触发点击事件的放大按钮图，再给放大图片进行定位的时候发现了空白问题设置宽高和视频大小一样后，设置一个 overflow：hidden ，就可以完美解决未脱离文档流导致的空白问题！！！！ ...

position: fixed 和 position: absolute

最新发布

11-08

### `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> ```