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

最新推荐文章于 2024-05-14 12:33:13 发布
最新推荐文章于 2024-05-14 12:33:13 发布
阅读量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 1105
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实现模拟position的fixed页面定位效果
12-10
当 `position:fixed` 不可用或需要兼容性处理时，我们可以将需要固定的元素绝对定位，并且通过调整父级容器的滚动来达到类似的效果。在这个例子中，`.fixed` 元素被固定在屏幕的左上角，而 `.body` 元素则在 `.fixed...
CSS的三种定位机制。绝对定位是相对谁？设置百分属性时是相对谁？
woke的博客
09-13 7768
直入主题： CSS定位的三种机制： 一.普通流： position: static 元素框正常生成，默认设置。 position: relative 元素相对于它本来的位置，注意：移动后，在原来的位置会占用一个相同大小的空间。 二.绝对定位： position：absolute 相对于最近一层的设置了定位的父级元素（除去position:static）（可以向上寻找满足条件的父级元...
css中的定位总结
m0_47531829的博客
04-15 85
序号 定位模式 是否脱标 移动位置 1.static（静态定位）不脱标 不能使用边偏移 很少使用 2.relative（相对定位）不脱标 相对于自身位置偏移 常用 3.absolute（绝对定位）脱标 相对于带有定位的父级或者body 常用 4.fixed（固定定位）脱标 相对于游览器的可视区 常用 固定定位可以看作是一种特殊的绝对定位 5.sticky（粘性定位）不脱标 相对于游览器的可视区 当前阶段比较少使用 一般使用的是相对定位和绝对定位相结合的定位方式，父级用相对定位
position:fixed无法固定到父盒子上面的解决方案
最新发布
qq_71214810的博客
05-14 1160
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。简单来讲的话一个元素在滚动到某个位置之前为相对定位，然后当它达到指定的偏移位置时，它会“粘”在那里（就像固定定位一样通常是视口的顶部或底部），直到滚动出视口。需要注意的是，为了使粘性定位生效，元素必须有一个toprightbottom或left属性的非auto值。sticky元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和。
css定位总结
白马非马军的博客
10-09 1145
定位position: static（默认）、fixed（固定定位）、absolute（绝对定位）、relative（相对定位）、sticky（粘性定位） 1. fixed      特点：不占空间、不随滚动条移动     相对于浏览器窗口进行定位，不占空间；     如果不设置定位坐标，则就在原来的位置；     如果结合定位坐标，就是相对于目标位置的距离；     层级要比普通标签...
关于div相对于父级盒子实现绝对定位position:fixed的效果
ggggd233的博客
05-15 2590
style中加入：position: sticky; 添加top、bottom、left、right任意一个属性即可生效
CSS属性详解——position:fixed
Wod_7的博客
06-04 9865
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
position:fixed 相对父元素定位
weixin_30364147的博客
11-05 923
position:fixed是对于浏览器窗口定位的，要实现相当于父元素定位，可以这样： 不设置fixed元素的top，bottom，left，right，只设置margin来实现。 这种方法本质上fixed元素还是相当于窗口定位的，实现效果上是相对于父元素定位。 此外，position:fixed元素会受到父元素的影响，而出现不能以窗口进行定位： 1. 因为fixed元素并不总是...
fixed定位相对于父元素
jjxyh的博客
07-26 4079
fixed定位
跨浏览器的实践:position:fixed 层的固定定位
10-30
在网页设计中，实现元素的固定定位（Fixed Positioning）是一项常见的需求，它可以使元素相对于浏览器窗口保持固定的位置，无论用户滚动页面如何，该元素总是在屏幕的特定位置。`position: fixed` 是 CSS 中的一个...
固定浮动定位(fixed)实现思路及代码
12-13
在网页设计中，固定定位（position:fixed）是一种常见的布局技术，它允许元素相对于浏览器窗口进行定位，即使在滚动页面时也会保持其位置不变。在本案例中，我们需要在页面底部中间固定一个区块，通常会使用`...
css中关于定位属性position为fixed的使用记载
09-25
`position: fixed`是一个非常特殊的定位方式，它将元素相对于浏览器窗口进行定位，而不是相对于其正常文档流中的位置。这意味着，无论用户如何滚动页面，固定定位的元素始终保持在屏幕的某个特定位置。例如，许多...
CSS position: fixed 相对于父元素定位
热门推荐
weixin_48003149的博客
12-10 1万+
使用fixed进行布局的元素，在一般情况下会相对于屏幕视窗来进行定位。但是如果父元素的transform,perspective或filter属性不为none时，position为fixed的元素就会相对于父元素来进行定位。​​​​​​​ 如果父级元素的层级比其兄弟节点低，就算fixed的层级比父级元素及其兄弟元素高，它也会被父级元素的兄弟元素遮挡住。
position:fixed实现相对于父级定位
callmeCassie的博客
10-26 1万+
position:fixed
css相对于父元素的fixed定位的实现
weixin_42048805的博客
06-16 3255
问题描述 之前在项目中，遇到了一个场景，需要实现相对于父元素的fixed定位：在父元素内拖动滚动条时，"fixed"定位的元素不能滑动，在外层拖动滚动条时，父元素及父元素内的所有元素跟着一起滑动。但是position: fixed是相对于窗口进行的定位，不能直接实现我们需要的效果。在网上搜索看到一个还不错的解决方案，不过利用了CSS3的transform，兼容性不是很好。 解决思路 ????这是我们希望的效果，但是没法直接实现 我们想让特定子元素相对于父元素"fixed"定位，也就是说，剩余的子元素
相对定位、绝对定位和固定定位
狗头苏丹的博客
06-08 367
相对定位就是相对于自己以前在标准流中的位置来移动。 绝对定位就是相对于body来定位。 绝对定位在这里分两种情况： (1)父元素没有或者没设置相对定位，相对于浏览器视口区域进行定位。 (2)父元素设置了相对定位，相对于父元素/祖先元素进行定位。 固定定位可以让某个盒子不随着滚动条的滚动而滚动。
web前端练习3----css的position属性理解
翟浩浩Android专栏
11-21 415
position: relative; 相对定位元素的定位是相对其正常位置。 position: absolute; 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于: 结合下面的例子解释： 父元素box中， 必须设置 position: relative; 相对定位； 子元素icon1中， position: absolute; 绝对定位； 子元素i...
关于position:fixed定位的位置不对的问题（即没有按照浏览器的窗口进行定位）
brilliantSt的博客
07-27 1598
关于position:fixed定位的位置不对的问题（即没有按照浏览器的窗口进行定位）
CSS——fixed 固定定位相对于父容器
05-19
CSS中，如果一个元素的定位属性设置为fixed，则该元素会相对于浏览器窗口进行定位，而不会受到父容器的影响。如果想要实现相对于父容器的固定定位，可以将父容器的定位属性设置为relative，再将子元素的定位属性设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值