父元素设置absolute或relative,子元素设置fixed定位失效

最新推荐文章于 2026-03-18 18:54:03 发布
原创 最新推荐文章于 2026-03-18 18:54:03 发布 · 7k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css
本文介绍了如何使用CSS中的fixed定位实现相对于父元素而非整个浏览器窗口的位置固定。通过将父元素设置为absolute或relative，同时子元素不指定top、left、bottom、right属性的方式，实现了元素相对于父元素的fixed定位。

fixed相对于body进行的窗口定位，而不是相对于父元素absolute或relative，所以当你想让fixed定位在窗口位置并且是相对于父元素的那只有一个办法就是把父元素设置为absolute或relative的同时子元素不设置任何的top、left、bottom、right。

【高频考点精讲】CSS定位全解析：static、relative、absolute、fixed、sticky的区别和应用场景
全栈老李的博客
05-05 1086
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS定位这个看似简单实则暗藏玄机的话题。我是全栈老李，一个在代码海洋里摸爬滚打多年的老司机。定位(position)这个属性，表面上看就几个值，但用起来却能让不少新手掉坑里。不信？咱们慢慢聊。
父级fixed_父元素设置absolute,子元素设置fixed定位失效
weixin_39955938的博客
12-22 1639
如下代码，应该一目了然<div class = "relative"><div class ="absolute"><div class="fixed"></div></div></div>里面的元素原本是正常定位的，需要动态改成fixed，又不能把元素移到外层，怎么解决？fixed相对于body定位，而不是相对于父元素abs...
前端父元素设置绝对定位，子元素设置的flex不生效
qq_41910413的博客
07-21 1120
当父元素设置绝对定位，子元素设置的flex会不生效， 解决办法是给父级加一个width:100%;
解决Fixed布局失效的问题
jocchoc的博客
05-16 5957
解决transform导致的Fixed布局失效的问题 问题描述 当父元素存在css3的transform属性时，会导致子元素的fixed布局失效（其表现像化为absolute布局）。 场景示例 例如在vue-cli项目中，长遇见这种情况。当使用vue-router路由切换效果，导致页面固定在底部的按钮布局失效。路由切换完毕，按钮归位。 解决办法 经过一番折腾，总结最好的解决办法就是。用...
踩坑系列之position:fixed和position:relative的冲突
m0_65661084的博客
03-25 1105
如下图 一开始item组件有一个相对定位 这样子上拉的时候 搜索框固定了 下面却有item的东西 解决方法：将item的相对定位取消 .item { display: flex; justify-content: space-between; /* position: relative; */ margin-top: 20rpx; } ...
fixed定位失效问题如何解决
qq_43680154的博客
08-26 2437
如何解决fixed定位的问题
relative absolute fixed sticky 定位
u014378108的博客
12-15 1290
在item的父元素增加overflow:auto 让父元素拥有滚动机制，但是.cont的高度由内容撑开，没有出现滚动条，sticky不生效。2. 对于脱离文档流的元素：包含块是第一个拥有定位属性（absolute,relative）的祖先元素（如果所有祖先都。absoulte:.cont脱离文档流后，下面的文字会移动到 .cont原来的位置，.cont会直接把文字遮住。离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。离它最近的一个拥有“滚动机制”的祖先元素。
CSS position定位属性，Absolute和Relative的区别
qq_43435403的博客
11-18 289
首先我们设置4个div <body> <div id="div1">我是div1</div> <div id="div2">我是div2</div> <div id="div3">我是div3</div> <div id="div4">我是div4</div> </body> 当不设置定位时： position属性 CSS定位属性允许我们为
关于定位position:relative & absolute
airor12345的博客
03-27 222
定位 父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的 position:static 默认值，无特殊定位，元素遵循HTML定位规则； position:absolute 表示绝对定位，元素以块元素（block element）的形式脱离所处的文档流，相对于position属性非static值的...
relative absolute
丰的博客
04-20 249
Position的属性值有： 1.Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位 2.Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。 3.Relative：相对定位，是相对于其原本的位置来定位的。 4.Static：默认值，没有定位。 5.Inherit：继承父元素的position值。 Absolution：若该元素没有设置宽...
零基础入门前端 彻底搞懂 CSS position 三大核心定位：relative/absolute/fixed 区别对比与实战指南
最新发布
见字如面，祝您早安，午安，晚安
03-18 679
相对定位是元素相对于自身在正常文档流中的初始位置进行偏移的定位方式，是三大定位中唯一不脱离文档流的定位类型。绝对定位会让元素完全脱离正常文档流，相对于最近的 position 值非 static 的祖先元素进行偏移；如果找不到符合条件的祖先元素，则最终相对于页面根元素 (html) 或浏览器视口定位。固定定位会让元素完全脱离正常文档流，默认相对于浏览器可视视口 (viewport)进行固定定位，无论页面如何滚动，元素始终保持在视口的指定位置不变。
position中absolute、relative、fixed、static
susie30
03-20 395
position样式的四个取值absolute相对于非static的最靠近的祖先元素进行定位。会忽略eft、top、right、bottom和z-index属性，只有margin起作用relative相对于自己在正常文档流的位置进行定位。margin+top一起起作用fixed相对于浏览器窗口进行定位。元素未滚动，在当前可视区域他的top值不生效，只有margin生效，滚动起来后margin失效，...
关于position:relative absolute fixed定位和布局的踩坑心得
热门推荐
英俊帅比林的博客
09-21 1万+
position属性介绍 absolute 顾名思义，这是绝对定位的意思，我们在使用时通常都是给元素声明了position:absolute属性，然后再用top,left,right,bottom属性去改变元素的位置，语法示例如下： position:absolute; top:10px; 该语句设置了定位方式为absolute,并且向下偏移了10px relative relative是相对定...
Chrome position:absolute 容器中嵌套的子元素position:fixed 一点bug
可遇，好孩子
12-20 5588
在chrome中，当然很少会遇到此情况. 父元素position:absolute而子元素：position:fixed时 打破了fix的位置固定, 修复此bug父元素加上，将流式滚动，去掉则继续fix效果 -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0);jsbin: http://jsbin.co
css position定位会被继承吗,关于css position: absolute、relative定位问题
weixin_39639260的博客
08-04 1966
position 属性规定元素的定位类型。属性定义position值：absolute、fixed、relative、static(默认值。没有定位，元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index声明)。)、inherit(规定应该从父元素继承position 属性的值)​absolute、fixed、relative介绍TRBL属性(TOP、...
前端~定位属性position（relative、absolute、fixed）的分析
Coder-coco的博客
08-14 563
relative：移动自身时，参考自身的原来位置而移动，移动子元素（子元素设置了absolute），作为定位的基准点（参照物）相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。当absolute对象移出了原来的位置，那么他原来的位置也就不存在了， 其他元素可以占领它的位置。relative它是以自己本身所在位置进行偏移的，relative的对象被移出了原来的位置后，2，position 是否会被内部的子元素继承？
相对定位、绝对定位和固定定位
狗头苏丹的博客
06-08 584
相对定位就是相对于自己以前在标准流中的位置来移动。 绝对定位就是相对于body来定位。 绝对定位在这里分两种情况： (1)父元素没有或者没设置相对定位，相对于浏览器视口区域进行定位。 (2)父元素设置了相对定位，相对于父元素/祖先元素进行定位。 固定定位可以让某个盒子不随着滚动条的滚动而滚动。
position: fixed定位失效原因及解决方案
surui0419的博客
11-28 7853
position: fixed问题分析
解决CSS属性position:fixed不起作用
人间一两风，十万八千梦。
12-06 2361
若父元素设置了transform属性，无论transform设置任何属性值，都会导致position:fixed属性失效！1.当我们在父元素设置了如下css属性时 ： 子元素表现如下： 可见，position:fixed属性失效，顶部导航栏消失。2.当我们移除了父元素中transform相关属性后，子元素表现如下： 可见，position:fixed属性效果恢复，顶部导航栏重新出现。
加了absolute或者fixed float:right 是不起作用的
飞翔的熊blabla
11-16 4701
绝对定位 改成relative就行
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值