• CSS 之 posiiton：fixed 固定定位在父元素含有 tranform 属性时会失效，变成 absolute 的效果

    一、简介

    今天在网上看到了一条言论说：子元素posiiton：fixed 固定定位在父元素含有 tranform 属性时会失效，变成 absolute 的效果。虽然这个场景，我还没有在实际工作中用到过，但本着多学多记、有备无患的原则，我决定用代码验证一下，并用博客记录下来。
    先说结论： 子元素设置 posiiton：fixed 固定定位，在父元素含有 tranform 属性时确实会失效，变成 absolute 的效果。也就是说其定位的参考对象从浏览器窗口变成了其父元素。
    推测原因： 我一开始认为是因为父元素设置 tranform 属性后，就创建了一个新的BFC（块格式上下文），该元素内部的样式相对独立，所以子元素的fixed定位，才会以父元素为参照对象。但是经过实验，其他可以创建BFC的样式却不会导致这种特性，说明还跟tranform某些特性有关。
    浏览器限制： 经过我的测试，这个特性表现，目前在大部分主流浏览器中存在（Chrome、FireFox、Safari、Edge、猎豹、搜狗、360浏览器），在IE和2345浏览器中，fixed还是fixed的表现。

    二、实例代码

    初始代码：
    <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: antiquewhite;
    }
    .son1 {
      position: fixed;
      top: 50px;
      left: 208px;
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
    .son2 {
      position: absolute;
      top: 50px;
      left: 208px;
      width: 100px;
      height: 100px;
      background-color: green;
    }
style>
<body>
  <div class="father">
    father
    <div class="son1">
      son1
    div>
    <div class="son2">
      son2
    div>
  div>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    页面效果：

    在这里插入图片描述
    注： 此时两个子元素，一个设置fixed定位，另一个设置absolute定位，因为定位方式不同，所以哪怕top和left的值相同，位置也不会相同。

    给父元素增加transform属性后的代码：
    <style>
    .father {
      /* transform属性的三种效果 translate、scale、rotate 都会触发这种效果 */
      transform: translateX(0px); 
      /* transform: scale(1); */
      /* transform: rotate(0); */
      width: 200px;
      height: 200px;
      background-color: antiquewhite;
    }
        .son1 {
      position: fixed;
      top: 50px;
      left: 208px;
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
    .son2 {
      position: absolute;
      top: 50px;
      left: 208px;
      width: 100px;
      height: 100px;
      background-color: green;
    }
style>
<body>
  <div class="father">
    father
    <div class="son1">
      son1
    div>
    <div class="son2">
      son2
    div>
  div>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    页面效果：

    在这里插入图片描述
    注： 因为父元素增加了transform属性，所以子元素设置的fixed定位失效，变成absolute定位的效果，再加上son1和son2两个元素的top和left的值相同，所以son1元素与son2元素位置完全重叠。

  • 相关阅读:
    A : DS堆栈--括号匹配
    MySQL的分页你还在使劲的limit？
    chatgpt GPT-4V是如何实现语音对话的
    【PHP进阶】Rabbitmq的实际使用
    为什么说 Apache APISIX 是最好的 API 网关？
    windows11安装SQL server报错等待数据库引擎恢复句柄失败
    【2-Docker安装部署ElasticSearch和Kibanan详细步骤】
    图像的特征点描述与提取
    AI智能网关在工业物联网领域有哪些应用优势
    文本相似度易语言查询代码
  • 原文地址：https://blog.csdn.net/weixin_45092437/article/details/126758801