fixed不以body定位，相对于父级容器定位问题

最新推荐文章于 2023-06-08 16:20:45 发布
最新推荐文章于 2023-06-08 16:20:45 发布
阅读量2.2w 收藏 3
点赞数
分类专栏： css 父级定位 文章标签： css-fixed
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oulihong123/article/details/53396303
版权

fixed不以body定位，相对于父级容器定位问题

经常在做一个页面的时候，希望一个元素不希望随着滚动条的滚动而动，这个时候就要用到fixed了
但是又不希望它根据整个窗口的左右两边定位(因为如果分辨率变小了，它与中间页面的距离就会变了)
希望达到的效果如下图所示
fixed定位图例

解决方法：只需要使用margin定位就可以了

如图，最先开始使用left,right进行定位
这里写图片描述

两个按钮是写在中间内部页面里面的
这里写图片描述

效果在不同分辨率下，与中间页面显示距离有差别
1920px分辨率下：

这里写图片描述

1366px分辨率下：

这里写图片描述

采用margin定位后，就会根据父级元素定位 (例子中的div .caseDetail类 )：

这里写图片描述

效果如下，无论何分辨率都以中间为定位，效果达成：

这里写图片描述

onlyhom
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
父级fixed_CSS3--改变固定定位(fixed)的父级定位元素
weixin_39766258的博客
12-22 1104
css--改变固定定位(fixed)的父级定位元素固定定位并不是只能相对 body 定位, 它的父级定位元素是可以自己设置的MDN 原文fixedThe element is removed from the normal document flow, and no space is created for the element in the page layout. It is positio...
CSS基本布局----定位
ducaifeng86的博客
11-12 263
前言 CSS有三种基本的布局机制：标准流、浮动和定位。定位就是确定元素的位置，利用top/right/bottom/left这四个偏移属性，可以准确地定义元素框相对于其正常位置应该出现的位置。top的优先级要高于bottom，left的优先级要高于right 一、相对定位：relative 相对定位：相对于元素原有位置的定位。相对定位并没有脱离文档流，因此对于它的位置设定不会影响其它兄弟元素...
关于div相对于父级盒子实现绝对定位position:fixed的效果
ggggd233的博客
05-15 2579
style中加入：position: sticky; 添加top、bottom、left、right任意一个属性即可生效
CSS属性详解——position:fixed
Wod_7的博客
06-04 9344
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
相对定位、绝对定位和固定定位
最新发布
狗头苏丹的博客
06-08 360
相对定位就是相对于自己以前在标准流中的位置来移动。 绝对定位就是相对于body来定位。 绝对定位在这里分两种情况： (1)父元素没有或者没设置相对定位，相对于浏览器视口区域进行定位。 (2)父元素设置了相对定位，相对于父元素/祖先元素进行定位。 固定定位可以让某个盒子不随着滚动条的滚动而滚动。
CSS的三种定位机制。绝对定位是相对谁？设置百分属性时是相对谁？
woke的博客
09-13 7762
直入主题： CSS定位的三种机制： 一.普通流： position: static 元素框正常生成，默认设置。 position: relative 元素相对于它本来的位置，注意：移动后，在原来的位置会占用一个相同大小的空间。 二.绝对定位： position：absolute 相对于最近一层的设置了定位的父级元素（除去position:static）（可以向上寻找满足条件的父级元...
跨浏览器的实践:position:fixed 层的固定定位
10-30
在网页设计中，实现元素的固定定位（Fixed Positioning）是一项常见的需求，它可以使元素相对于浏览器窗口保持固定的位置，无论用户滚动页面如何，该元素总是在屏幕的特定位置。`position: fixed` 是 CSS 中的一个...
CSS实现模拟position的fixed页面定位效果
09-25
- `position: absolute`: 元素会相对于最近的非 static 定位的祖先元素（如果没有这样的祖先，则相对于 body）进行定位。 模拟 `position: fixed` 的关键是创建一个包裹层，并调整内部元素的位置。下面是一个示例...
css中关于定位属性position为fixed的使用记载
09-25
`position: fixed`是一个非常特殊的定位方式，它将元素相对于浏览器窗口进行定位，而不是相对于其正常文档流中的位置。这意味着，无论用户如何滚动页面，固定定位的元素始终保持在屏幕的某个特定位置。例如，许多...
IE6浏览器不支持固定定位（position：fixed）解决方案
12-13
今天在学习的时候，突然发现在IE6浏览器下，position：fixed不管用了： 复制代码代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <...
web前端练习3----css的position属性理解
翟浩浩Android专栏
11-21 414
position: relative; 相对定位元素的定位是相对其正常位置。 position: absolute; 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于: 结合下面的例子解释： 父元素box中， 必须设置 position: relative; 相对定位； 子元素icon1中， position: absolute; 绝对定位； 子元素i...
移动端fixed定位兼容问题
yes_catherine的博客
08-06 553
iOS 下，fixed定位的元素里如果有input，键盘弹起后，点击定位会上移，显示定位也会出问题 解决：不使用fixed body{height:100%;} 使用absolute 替代 fixed，相对于body定位
css定位总结
白马非马军的博客
10-09 1134
定位position: static（默认）、fixed（固定定位）、absolute（绝对定位）、relative（相对定位）、sticky（粘性定位） 1. fixed      特点：不占空间、不随滚动条移动     相对于浏览器窗口进行定位，不占空间；     如果不设置定位坐标，则就在原来的位置；     如果结合定位坐标，就是相对于目标位置的距离；     层级要比普通标签...
CSS position: fixed 相对于父元素定位
热门推荐
weixin_48003149的博客
12-10 1万+
使用fixed进行布局的元素，在一般情况下会相对于屏幕视窗来进行定位。但是如果父元素的transform,perspective或filter属性不为none时，position为fixed的元素就会相对于父元素来进行定位。​​​​​​​ 如果父级元素的层级比其兄弟节点低，就算fixed的层级比父级元素及其兄弟元素高，它也会被父级元素的兄弟元素遮挡住。
position: fixed如何相对父元素定位
weixin_43487782的博客
09-27 8320
在项目中遇到一个问题，项目中有一个弹框，弹框中有一个anchor组件，弹框中的内容可以滚动，而anchor组件需要相对于弹框保持固定。我们知道，position: fixed是相对于浏览器窗口进行定位，而弹框宽度是固定的，浏览器窗口的宽度则是不确定的，所以相对于浏览器窗口定位肯定不行。如何让anchor组件相对于弹框进行固定定位呢？ 查了下资料发现，虽然position:fixed是对于浏览器窗口定位的，但是只要不设置fixed元素的top，bottom，left，right，此时该元素就是相对于父元素进
position:fixed 实现相对于父元素定位
weixin_44785498的博客
05-10 4459
position:fixed 实现相对于父元素定位 比如：中间内容区域的大小固定为1000px，对应不同的浏览器宽度，要使得某一个资源子固定在相对于内容区域的某一个位置，就不能使用 left:xxx，right:xxx这样写 position:fixed 是对于浏览器窗口定位的，要实现相当于父元素定位，可以这样： <style> .fa { width: 500px; height: 5000px; background-color: red; margin:
内容中的 position : fixed 竟然没相对窗口来定位
qq_25186543的博客
11-27 5838
在  vue 项目中，有个页面切换动画，然后内容里的   position : fixed 只相对 viewBox 来定位，检查后发现动画的css 中的个属性 -webkit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px; 然后里面的 fixed 就根据  有这个属性来定位了，暂时不知道 什
CSS定位中的Fixed定位
m0_46331585的博客
08-03 9867
相对定位 没有脱离文档流，相对于原来的位置。 position: relative; top: 20px; right: 20px; 绝对定位 脱离文档流了，（相对于父元素。一般是以<body>为参考的，但若父容器设置了相对或者绝对定位，就以父元素为主）（控制堆叠顺序 ( z-index )注意，没有单位·`） position: absolute; top: 20px..
CSS——fixed 固定定位相对于父容器
05-19
CSS中，如果一个元素的定位属性设置为fixed，则该元素会相对于浏览器窗口进行定位，而不会受到父容器的影响。如果想要实现相对于父容器的固定定位，可以将父容器的定位属性设置为relative，再将子元素的定位属性设置为fixed。这样子元素的定位将相对于父容器进行定位。下面是示例代码： HTML部分： ``` <div class="parent"> <div class="child">我是固定定位的元素</div> </div> ``` CSS部分： ``` .parent { position: relative; width: 200px; height: 200px; border: 1px solid #ccc; } .child { position: fixed; top: 50px; left: 50px; width: 100px; height: 100px; background-color: #f00; } ``` 在上述代码中，父容器的定位属性为relative，子元素的定位属性为fixed，并且设置了top和left值，这样子元素就会相对于父容器进行固定定位。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值