postionfixed固定_解决position:fixed固定定位偏移问题的教程

╰半橙微兮° 2022-10-27 13:39 297阅读 0赞

css固定定位position:fixed很容易使用，就是相对浏览器的viewport进行定位，top:0;left:0就是在左上角。

.container\{

width: 100px;

height: 100px;

background: \#888;

position: fixed;

top: 100px;

left: 100px;

\}

![7833ae64a7ac48cbf1057d69cb371d49.png][]

当父级元素设置transform之后

.BFC-box\{

margin:200px;

height: 200px;

width: 200px;

border:2px solid red;

transform: scale(1);

\}

.container\{

width: 100px;

height: 100px;

background: \#888;

position: fixed;

top: 100px;

left: 100px;

\}

fixed元素变成了相对父元素进行定位。

![30f6a2e6272e48e41bc2d0a36319693d.png][]

真是令人蛋疼，原因在于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下:

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

mounted()\{

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

\}

[7833ae64a7ac48cbf1057d69cb371d49.png]: /images/20221024/64f0ac84da5e475c92dddf9d3a1b5fd7.png
[30f6a2e6272e48e41bc2d0a36319693d.png]: /images/20221024/b435ca733cbf494298ba1b69115716da.png

发表评论取消回复

表情：

评论列表（有 0 条评论，297人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端— position: fixed;固定定位解决方案

这里有个关键的东西叫做viewport，你经常在页面的头部里可以见到它： <meta name="viewport" content="width=device-wi

一时失言乱红尘/ 2023年10月11日 13:16/ 0 赞/ 40 阅读

相关固定定位（HTML、CSS）

固定定位（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <meta

约定不等于承诺〃/ 2023年10月03日 13:17/ 0 赞/ 13 阅读

相关固定定位练习

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

た入场券/ 2023年02月18日 12:55/ 0 赞/ 30 阅读

相关 CSS定位（相对定位，固定定位，绝对定位）

在CSS中，可以使用position属性来定位元素。position 属性规定元素的定位类型。属性值： absolute：生成绝对定位的元素，相对于 static

刺骨的言语ヽ痛彻心扉/ 2023年01月11日 09:15/ 0 赞/ 223 阅读

相关 postionfixed固定_解决position:fixed固定定位偏移问题的教程

css固定定位position:fixed很容易使用，就是相对浏览器的viewport进行定位，top:0;left:0就是在左上角。 .container\{ width

╰半橙微兮°/ 2022年10月27日 13:39/ 0 赞/ 298 阅读

相关相对定位、绝对定位、固定定位、元素的层级、透明度

文章目录相对定位绝对定位固定定位元素的层级透明度

我不是女神ヾ/ 2022年08月31日 11:04/ 0 赞/ 300 阅读

相关 IE6 position:fixed 固定定位问题

IE6下 position:fixed失效，解决方法如下：除了IE6的浏览器 .top \{ width: 97px; heigh

妖狐艹你老母/ 2022年08月07日 01:57/ 0 赞/ 239 阅读

相关 CSS基础之固定定位

固定定位 1、什么是固定定位将元素固定在网页的可视化的某个位置处，不会随着滚动条而发生位置的改变 2、属性 & 值 position:fixed;

╰半橙微兮°/ 2022年07月13日 13:21/ 0 赞/ 241 阅读

相关 fixed固定定位

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <st

╰+哭是因爲堅強的太久メ/ 2022年06月18日 05:25/ 0 赞/ 215 阅读

相关 flex悬挂式布局处理固定定位的问题

一直以来在webapp的时候经常遇到上下固定定位的问题,然后有一部分内容被遮挡住了,这就很尴尬,每次都要计算padding当前fixed容器的高度,来保证兄弟元素不被遮挡的问题

以你之姓@/ 2021年12月05日 04:11/ 0 赞/ 435 阅读