关于使用fixed定位会影响后面元素

最新推荐文章于 2022-10-09 15:05:52 发布

﹎я゛诗词几句。

最新推荐文章于 2022-10-09 15:05:52 发布

阅读量895

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/qq_43964369/article/details/124861793

版权

本文详细解析了CSS中fixed定位的特性，当使用fixed定位的元素在页面中时，它将脱离文档流，不会占用普通流元素的空间。因此，其他普通元素会自动填补这个空缺。解决此问题的一种方法是在fixed元素外添加一个包裹盒，并设置其高度，以保持布局的稳定性。这个技巧对于理解和调整网页布局至关重要。

摘要由CSDN通过智能技术生成

因为fixed属于脱离文档流定位，所以在相同父元素下它不占据普通流元素的位置，普通元素会顶上去。我们可以在fixed定位的元素外再加一个盒子包裹住它，设置这个盒子的高度即可。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

﹎я゛诗词几句。

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于使用fixed定位会影响后面元素

因为fixed属于脱离文档流定位，所以在相同父元素下它不占据普通流元素的位置，普通元素会顶上去。我们可以在fixed定位的元素外再加一个盒子包裹住它，设置这个盒子的高度即可。
复制链接

扫一扫

父级fixed_position: fixed在当前视图基于父元素定位

weixin_39788572的博客

12-22

624

今天在工作中遇到这样一个需求，需求如下：子元素要固定在父元素旁边，当下滑到一定位置的时候，子元素固定在浏览器窗口顶部。试了一下，fixed只能基于浏览器窗口定位，并不能基于父元素定位，这样满足不了我的需求。CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排...

深入探究iOS下fixed定位导致的问题

weixin_34198881的博客

08-04

2242

讨论背景众所周知，fixed元素在IOS下的表现是糟糕的，fixed元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚（如：页面滚动，fixed元素与页面相互分离；页面滚动，fixed元素消失等）。这些表现过于离奇，显得没有逻辑，一时间很难找到对应的解决方案。所以笔者决定从一个简单列表页出发，把遇到的各种奇怪问题都罗列出...

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

定位后，下面的元素（跑上来）占了上面元素的位置怎么办？

weixin_42220130的博客

09-17

4010

<div class="box"> <div class="img"></div> <div class="title">标题文字</div> </div> //样式 .box{position: relative;} .img{width: 100%; height: 120PX; positio...

position:fixed定位后下面紧接着div等元素的问题

u011402106的博客

06-10

3512

处理办理：在后面pistion:fixed后面，紧接着加一个空的设有高度的div <div class="ziye_toub"> //这个div position:fixed已经脱离文档流 <div class="left"></div> <p>商标库</p> </div> <div style="height: .75rem;"></div> //处理办法重点 <div .

【HTML】固定定位fixed后元素不占位

SZnAl的博客

03-03

3520

使用position: fixed 后，元素不占位，下面的元素会直接占上去或者使用固定定位的元素被盖住解决方法：给设置了fixed的元素外面包一层div，再给这个div设置高度即可

微信小程序：position: fixed导致的滚动时页面元素不跟着动的问题

IT老五

05-30

4297

由于对js的不熟悉，花了近半个小时才解决这个问题，现在记录下：项目需要如上图所示的一个列表页面，唰唰唰…没花多长时间就完成了,在元素较少时，不需要滚动，使用一切正常；后来添加了更多的item后，页面需要滚动，但是滚动的效果感觉莫名其妙，如下图： OMG？？？居然有部分元素不随着页面一起滚动…(ｷ｀ﾟДﾟ´)!!..一脸懵逼中… 没办法，有病得治，有Bug赶紧改…百度谷歌必应了一阵，后来...

css解决使用固定定位导致下方元素上移到固定定位元素的位置

黑帽子技术的博客

10-07

2573

问题描述固定定位相对于视口定位，如果上方有一个div元素，开启固定定位以后，这个div就会脱离文档流（“漂浮走了”），那么原来的这个div所占据的位置，就会空出来，就会导致下方的div元素蹿升上来。就会导致布局的紊乱。解决方式...

ios 底部用定位 fixed。在软件盘出来后，页面元素被顶上去一部分，fixed定位的footer也跑到了上面去。解决方法...

qq_34569508的博客

04-23

164

ios 底部用定位 fixed。在软件盘出来后，页面元素被顶上去一部分，fixed定位的footer也跑到了上面去。解决方法 $("input").focus(function(){ $('.footerssss').css({ 'position':'absolute' }) }) $("input").blur(...

CSS中的定位和解决父元素高度塌陷

QyangR1123的博客

02-27

5268

在CSS中，Position 属性经常会用到，主要是绝对定位和相对定位，简单的使用都没有问题，尤其嵌套起来，就会有些混乱，今记录总结一下。 1、相对定位( position: relative;) 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 relative：生成相对定位的元素，相对于其正常(原来)位置进行定位。 2、绝对定位（position: absolute;）绝对定位使元素的位置与文档流无关，因此不占..

固定定位（会脱离文档流）——position: fixed

weixin_48796690的博客

10-09

768

固定定位（会脱离文档流）——position: fixed

position:fixed 固定定位

热门推荐

asdfgv2022的博客

08-03

5万+

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：特性特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.始终相对于浏览器窗口四个角为原点进行固定定位的3.不会随页面的内容滚动而滚动4.能使不能设置宽高的行级元素设置宽高5.提升层级6.如果没有定位偏移属性，对元素本身有影响；应用场景：相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏...

元素脱离普通文档流后特点及问题总结

泠泉石上的博客

08-28

2515

在使用float，position：absolute | fixed属性之后元素会脱离普通文档流，与inline-block和position：relative不同，后两者还在普通文档流中。对于行内元素来说，允许行内元素使用原本不能使用的width，height，margin-top，margin-bottom，padding-top，padding-bottom属性。元素脱离普通文档流后

移动端常见问题解决方案（position:fixed失效、overflow:auto导致滚动不流畅、input获得焦点软键盘弹出时position:fixed的footer遮挡内容区域等）

Flowering_Vivian的博客

09-23

2356

移动端弹层水平垂直居中方法 .layer{ position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transfor

Div的定位

ITnainiu的博客

03-11

2237

DIV的定位一、定位的属性： 1.定位模式：position：一共有4种 satitic：默认定位方式静态定位情况下不能通过边偏移来移动 relative：相对定位相对当前元素（本身）在文档流中的位置去偏移相对于自身原来的位置去移动，但是在文档流中的位置不变，依旧占据着文档流中的位置 absol...

元素设置position:fixed后怎样控制下面内容的位置

weixin_33778778的博客

06-12

5746

2019独角兽企业重金招聘Python工程师标准>>> ...

固定定位fixed

seimeii的博客

09-30

211

固定定位fixed

fixed定位之后，如何让div上下垂直居中

qq_15007601的博客

09-15

2862

在div用fixed定位之后，接下来想要其垂直居中，需要在fixed定位的那个div jxd-right上定义， display:table;margin-top:auto; margin-bottom:auto; 然后在里面的div fixedmiddle定义 display:table-cell;，即可做到垂直居中但是ie上实现无效。 .jxd-right{ pos...

html fixed其它元素自动往下,详解CSS不受控制的position fixed

weixin_39732506的博客

05-31

605

失效的 position:fixed在许多情况下，position:fixed将会失效。MDN用一句话概括了这种情况：当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。What！还有这种操作？可能有部分同学还没 get 到上面这句话的意思，通俗的讲就是指定了position:fixed的元素，如果其祖先元素存在非 none 的 transform 值，那么该元素将...

css中position:fixed的一些影响问题

weixin_44817180的博客

06-10

906

1.当页面底部有个固定button，且给其固定min-width，当屏幕宽度小于min-width时不会出现横向滚动解决办法：就是给这个固定button外面加个div，其class为buttonBox,并且把原button的class（.fixedBtn）中的position：fixed删除。 2.当页面底部有个固定button，且给其固定min-width，当屏幕宽度小于min-width时不会出现横向滚动，这时如果在position：fixed层加display：flex;有可能会导致，固定的butt

position: fixed;为啥会点击穿透

最新发布

07-27

position: fixed;会导致点击穿透的原因是因为fixed定位的元素脱离了文档流，并且覆盖在其他元素之上，所以点击事件会直接穿透到fixed元素下面的元素上。当fixed元素没有填充内容时，点击事件会直接穿透到fixed元素下面的元素上，而不会触发fixed元素上的点击事件。这是因为fixed元素没有实际的内容，所以点击事件会透过fixed元素传递到下面的元素上。\[2\] 为了解决这个问题，可以采用给fixed定位元素添加一个absolute定位的子元素，并给子元素添加一些内容，然后设置子元素的颜色为透明，最后为了不影响页面交互，给子元素添加pointer-events: none;的样式。这样做的目的是让fixed元素有实际的内容，从而阻止点击事件穿透到下面的元素上。\[3\]另外，还可以使用绝对定位的方式来解决点击穿透问题，将整个页面进行绝对定位，并设置overflow: hidden;来禁止页面滚动，这样也可以避免点击事件穿透到下面的元素上。\[1\] #### 引用[.reference_title] - *1* [小程序中fixed定位弹框页面穿透问题](https://blog.csdn.net/zd1007129657/article/details/118905935)[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^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [css 固定定位position:fixed 拦截了点击事件，导致后面组件无法使用@click的解决办法](https://blog.csdn.net/ScottePerk/article/details/130063952)[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^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [通过“css点击穿透“优化[移动端fixed导致的问题]](https://blog.csdn.net/qq_35306736/article/details/108139416)[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^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]