关于position:fixed基于父级元素定位的情况

最新推荐文章于 2022-09-01 22:54:56 发布
最新推荐文章于 2022-09-01 22:54:56 发布
阅读量1.2k 收藏
点赞数
原文链接：https://juejin.im/post/5c8bbe20f265da2d980948ae
版权

今天用小程序开发的时候用到了一个组件：movable,在这个组件里因为需求原因子元素用到了position:fixed进行定位，但是发现其竟然是相对于父级进行定位而不是想象中的窗口进行定位，后来发现，当父级元素有tramsform的时候，子级的position:fixed是相对于父级进行定位的，随手记下

转载于:https://juejin.im/post/5c8bbe20f265da2d980948ae

weixin_30595035
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
跨浏览器的实践:position:fixed 层的固定定位
10-30
一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
weixin_30583563的博客
11-03 215
问题：fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响。 解释：层叠关系是受层叠上下文影响的。文档中的层叠上下文由满足以下任意一个条件的元素形成： 根元素 (HTML), 绝对（absolute）定位或相对（relative）定位且z-index值不为"auto", 元素的opacity属性值小于1. (参考the specifi...
position:fixed 实现相对于父元素定位
weixin_44785498的博客
05-10 4424
position:fixed 实现相对于父元素定位 比如：中间内容区域的大小固定为1000px，对应不同的浏览器宽度，要使得某一个资源子固定在相对于内容区域的某一个位置，就不能使用 left:xxx，right:xxx这样写 position:fixed 是对于浏览器窗口定位的，要实现相当于父元素定位，可以这样： <style> .fa { width: 500px; height: 5000px; background-color: red; margin:
position定位总结+元素选择器+重绘+回流/重排
m0_52669454的博客
09-01 1050
position定位总结+元素选择器+重绘+回流/重排
html中怎么相对父元素定位,怎么让position:fixed相对于父元素定位
weixin_39645249的博客
06-09 1549
怎么让position:fixed相对于父元素定位position:fixed 正常来说是相对于浏览器窗口定位的, 最近遇到一个场景,需要让加了这个属性的元素相对于父元素定位fixed不为元素预留空间，而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 tr...
position:fixed 相对父元素定位
weixin_30364147的博客
11-05 831
position:fixed是对于浏览器窗口定位的，要实现相当于父元素定位，可以这样： 不设置fixed元素的top，bottom，left，right，只设置margin来实现。 这种方法本质上fixed元素还是相当于窗口定位的，实现效果上是相对于父元素定位。 此外，position:fixed元素会受到父元素的影响，而出现不能以窗口进行定位： 1. 因为fixed元素并不总是...
子元素position为fixed时，宽度如何保持与父元素一致。
qq_24243695的博客
03-28 8195
position: fixed是生成绝对定位的元素，相对于浏览器窗口进行定位。 如果设置宽度100%，宽度会超过父元素 如果设置宽度width: inherit，会继承父元素宽度
CSS position: fixed 相对于父元素定位
weixin_48003149的博客
12-10 1万+
使用fixed进行布局的元素，在一般情况下会相对于屏幕视窗来进行定位。但是如果父元素的transform,perspective或filter属性不为none时，position为fixed的元素就会相对于父元素来进行定位。​​​​​​​ 如果父级元素的层级比其兄弟节点低，就算fixed的层级比父级元素及其兄弟元素高，它也会被父级元素的兄弟元素遮挡住。
前端笔试所获(css盒子)
qq_45149720的博客
10-16 140
CSS 盒子模型(Box Model) 1.Margin(外边距) - 清除边框外的区域，外边距是透明的。 2.Border(边框) - 围绕在内边距和内容外的边框。 3.Padding(内边距) - 清除内容周围的区域，内边距是透明的。 4.Content(内容) - 盒子的内容，显示文本和图像。 position static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。 fixed 定位 元素的位置相对
css中position:fixed实现div居中上下左右居中
09-25
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
主要介绍了详解iOS中position:fixed吸底时的滑动出现抖动的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
IE6支持position:fixed完美解决方法
10-30
IE7已经支持position:fixed了，而我们的IE6呢？还继续使用js事件？消耗资源，破坏结构，画面闪耀。
CSS解决position:fixed基于父元素定位而不是浏览器窗口
热门推荐
DDD4V的博客
03-08 1万+
众所周知fixed是基于浏览器窗口定位，但是今天遇到个问题，发现fixed并不一定是这样 有一个例外会使fixed是基于祖先元素定位。 当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。 <div class="container" style="transform:rotate(360deg);"> <div> <div class="box" style="position:fixed;"></div&
css固定定位如何基于父级来定为而不是视口
斜杠青年博客
11-02 2255
之前在项目中，遇到了一个场景，需要实现相对于父元素的fixed定位：在父元素内拖动滚动条时，"fixed"定位的元素不能滑动，在外层拖动滚动条时，父元素及父元素内的所有元素跟着一起滑动。但是position: fixed是相对于窗口进行的定位，不能直接实现我们需要的效果。 我们想让特定子元素相对于父元素"fixed"定位，也就是说，剩余的子元素不定位。那我们可以分开来想，如果添加一个祖先元素assistor，有两个祖先元素，一个用于辅助定位，一个用于包裹不定位的内容，这个问题不就解决了吗。像这样 实质上是c
关于position：fixed固定定位问题如何相对于父元素定位问题
weixin_43107123的博客
04-28 1413
关于position：fixed固定定位问题 默认是相对于窗口的固定定位 如何改成相对于父元素的相对定位呢？ 给父元素添加 transform: translate(0,0); 使得子元素便可相对父元素设置position：fixed
[记录]-CSS中的定位-子绝父相
jgsecurity的博客
10-28 590
初学者在学习CSS中定位的使用时，往往遵循子绝父相的原则。这样的设置用于我们需要让某个子元素相对父元素进行绝对定位布局。例如： <style> .header { position: relative; height: 105px; background-color: pink; } .logo { position: absolute; top: 25px; left:
不受控制的 position:fixed
weixin_33966095的博客
08-14 423
大家都知道，position:fixed 在日常的页面布局中非常常用，在许多布局中起到了关键的作用。它的作用是： position:fixed 的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。 但是，在许多特定的场合，指定了 position:fixed 的元素却无法相对于屏幕视口进行定位。这是为何呢？   失效的 position:f...
毕业设计MATLAB_执行一维相同大小矩阵的QR分解.zip
最新发布
05-27
毕业设计matlab
position: fixed相对于父级
07-28
当一个元素被设置为 position: fixed 时，它的位置会相对于浏览器窗口进行定位，而不是相对于其父级元素。 换句话说，position: fixed 会将元素的位置固定在浏览器窗口的某个位置，无论页面滚动与否，该元素都会...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值