transform影响position: fixed的解决方法

最新推荐文章于 2024-04-28 12:52:39 发布

pink味的草莓

最新推荐文章于 2024-04-28 12:52:39 发布

阅读量1.8k

点赞数 1

文章标签： html css vue.js

本文链接：https://blog.csdn.net/ferwagrea/article/details/129840443

版权

transform影响position: fixed原因在于transform提升了元素的地位，在W3C规范中有如下说明：

For elements whose layout is governed by the CSS box model, any value other than none for the transform also causes the element to become a containing block, and the object acts as a containing block for fixed positioned descendants

在transform不为none的元素中，定位是会受到影响的。

解决方法

在不影响布局的情况下，可以直接把要定位的元素移动到body下:

<body>

<div class="BFC-box"></div>

<div class="container">

</div>

</body>

如果是在组件中不方便对元素进行操作，可以使用js，以vue为例:

<div ref="container" class="container"></div>

mounted(){

document.body.append(this.$refs['contaier'])

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

pink味的草莓

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
transform影响position: fixed的解决方法

在transform不为none的元素中，定位是会受到影响的。
复制链接

扫一扫

详解iOS中position:fixed吸底时的滑动出现抖动的解决方案

08-26

在这种方法中，需要在使用 position:fixed 的元素上加上该属性，以便解决抖动问题。 iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案可以通过解决 native 和 h5 两个原因引起的抖动来实现。开发者可以根据...

transform影响fixed定位

weixin_68542759的博客

10-20

294

transform提升了元素的地位。

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

记录vue中使用了transition后使用fixed引起的Bug

前端李小白的博客

07-31

1782

最近在项目的layout页面中使用了transition组件，接着页面里面某些使用fixed定位的元素就出现了问题，如图底部导航这个元素一开始会从底部弹起造成这样的原因可能是由于使用了fixed定位引起的，而且上面部分用了calc(100% -底部的高度) 接下就这样解决了底部改成不用定位，滚动的地方使用calc(100vh -底部的高度)，再设置滚动，这样就解决了底部弹起的bug .r-image { .container { width: 100%; // height:

unity中修改transfrom中position失效的问题

热门推荐

汪小穆的博客

05-04

1万+

前言：发现一个很有趣的关于transform的bug。一、问题起始： ①、要弄一个侧边展开栏，我是直接给body添加一个transform:translateX(80%);的样式，让body整体往左移了80%的距离 ②、然后点击侧边展开栏再给body添加一个transform:translateX(0);的样式，让他回到原来位置。 ③、整体的效果实现并没有问题。 ④、但是fixed定位...

CSS中transform对fixed定位的影响-父级加上了transform属性之后就会影响子级的固定定位

学习记录总结分享

02-03

1970

我们知道，设置了position: fixed固定定位属性的元素会脱离文档流，达到“超然脱俗”的境界。也就是说此时给这种元素设置top, left, right, bottom等属性是根据浏览器窗口定位的，与其上级元素的位置无关。

transform对fixed的影响

CodingNoob

12-23

2249

最近做项目遇到一个问题，就是为元素设置fixed属性之后发现元素竟然不是相对于窗口定位，纠结了很久，才发现原来是父元素设置了transform属性导致元素相对于父元素定位，fixed不相对窗口定位了。代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> ...

transform导致的fixed固定定位失效

cici_bigchild的博客

10-10

578

项目里需要做一个在容器内全屏的功能，screenfull不满足，他只能浏览器全屏（可能是我不会用，求大神指导）。在transform不为none的元素中，定位是会受到影响的。1、父元素及其祖先元素如果使用了transform，则使用fixed定位将会失效，某些效果的实现可以使用sticky来代替。2、同样在被影响的元素上做transform。（试了有用，但是这个位置的计算我把控不了，不适用我的项目）3、最后决定剑走偏锋，在不影响布局的情况下，可以直接把要定位的元素移动到body下。

issues: 父级元素包含transform导致fixed定位失效

落枫秋歌

12-11

1657

fixed定位失效， transform影响fixed定位，包含块

css3 position fixed固定居中问题解决方案

09-25

然而，当尝试将一个`position: fixed`的元素居中时，常规的居中对齐方法如 `margin: 0 auto` 可能不再有效，因为`fixed`定位使元素脱离了正常文档流，不再受到父元素的影响。通常，我们使用 `margin: 0 auto` 来...

css中position:relative和overflow:hidden之间的问题

09-25

为了解决这个问题，一种方法是将父元素的`position`也设置为`relative`。这样做虽然看起来有些反直觉，但实际上是利用了IE6和IE7的一个特性：当父元素也具有相对定位时，这些浏览器的渲染引擎会更好地处理`overflow:...

详解css3使用transform出现字体模糊的解决办法

01-18

position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; width: 405px; background-color: #ffffff; height: 226px; -webkit-box-shadow: 0 0...

css3的transform造成z-index无效解决方案

09-25

2. `position`值为`relative`、`absolute`或`fixed`的元素，且`z-index`不是`auto`。 3. `opacity`值小于1的元素（因为这些元素实际上被创建为一个匿名的层叠上下文容器）。 4. `display`值为`flex`、`inline-flex`...

css 常用操作

Bonrui编程路

01-12

4789

transform限制position:fixed的跟随效果元素设置position:fixed后大家都知道可以让元素不跟随滚动条滚动，但是transform可以把position:fixed干掉让其降级成absolute。如下面代码：本身应该不动的图片因为父级设置了transform而变成了absolute的效果。更多transform影响css的介绍请参考：

position:fixed 没有相对浏览器窗口定位的原因 transform冲突

kaosini的专栏

07-15

2532

遇到一个有意思的现象， fixed 的元素没有相对 viewport 定位，而是相对于它的父元素进行定位了。逐一排查后，发现是transform捣乱了。 fixed 元素的块级格式上下文 Block Formatting Context（BFC）由 viewport 创建，也就是fixed 元素的 BFC 包含在根元素的 BFC 里 w3c 对 transform 的[定义]()： For elements whose layout is governed by the CSS box mo.

position:fixed怎么参照祖先元素定位以及transfrom属性对元素布局的影响的原理

前端361

06-15

2741

position:fixed通常情况下是相对于窗口定位的，但是有一种情况，position:fixed是相对于祖先元素定位，而此时的定位层级（z-index）也是相对于祖先元素的。这种情况就是让祖先元素发生变换，也就是transfrom属性发生改变。实例： <div class='parent'> <div class='child'>我固定了吗？</div> </div> <div class='parentSibling'&gt

fixed固定定位transofrm失效的解决

qq_17189095的博客

07-17

573

然后，我们在该元素内部再创建一个 div 元素，并将其设置为绝对定位，同时使用 translate 属性将其水平和垂直居中。具体来说，我们将该元素的 display 属性设为 flex，然后使用 align-items 属性将其垂直居中，使用 justify-content 属性将其水平居中。造成这个问题的原因是，固定定位下的元素默认会受到图层剪裁（clipping）的影响，而 transform 属性需要开启硬件加速才能生效。因此，需要通过一些小技巧来解决这个问题。

transform下fixed定位失效

seori的博客

12-30

1408

transform下fixed定位失效以及定位回顾

CSS transform 使 fixed 定位失效？

码小余の博客

04-01

4741

CSS transform 使 fixed 定位失效？ 1. 最终实现效果如下看似简单的一个动画，却出现了种种bug，也不叫bug，毕竟是W3C官方的嘛，整整耗费了我一下午的时间去搞它。 2. 布局样式（关键点）先来看一下我的布局吧首先 index_bar_container 是 cl_header 的父元素（坑）就先看这个父子关系吧，其他的都一样了  <div v-if="show" :class="isShow ? 'in

解决CSS position:fixed 兼容问题

05-31

CSS中的position:fixed属性用于将元素固定在浏览器窗口的某个位置，无论滚动条如何滚动，该元素都会保持不变。但是，该属性在不同的浏览器中有不同的兼容性问题，下面介绍几种解决方法。 1. IE6兼容问题 IE6不支持position:fixed属性，可以使用position:absolute加javascript实现。 ``` <style> #fixedDiv { position: absolute; right: 0; bottom: 0; } </style> <script> window.onscroll = function() { var top = document.documentElement.scrollTop || document.body.scrollTop; document.getElementById("fixedDiv").style.top = (top + document.documentElement.clientHeight - document.getElementById("fixedDiv").offsetHeight) + "px"; } </script> <div id="fixedDiv">我是fixed元素</div> ``` 2. 其他浏览器兼容问题其他浏览器中，position:fixed属性很好用，但是如果在某些情况下，fixed元素的父元素设置了transform属性，会导致fixed元素表现异常。可以使用position:sticky属性代替。 ``` <style> #fixedDiv { position: sticky; position: -webkit-sticky; /* Safari */ top: 0; background: #fff; } </style> <div id="fixedDiv">我是fixed元素</div> ``` 另外，还可以使用JavaScript来实现fixed效果，但是需要考虑到性能问题。