美文网首页
transform 对 position:fixed 的影响

transform 对 position:fixed 的影响

作者: 成神之路_be73 | 来源:发表于2020-08-14 15:50 被阅读0次

    问题复现:我使用子绝父相的定位方法后,里面嵌套的el-dialog出现了显示问题;
    起因:在一个div中嵌套了组件, 组件是一个el-dialog,正常操作是触发某事件,显示dialog弹框,这个逻辑没问题。
    开发工具:Vue,Element,
    业务需求:目前要求是将div根据他的父级进行垂直居中。
    思路: 直接给div设置一个样式

     <html>
       <div class="dad">
         <div class="son"></div>
       </div>
     </html>
     <css>
       .dad{position: relative;width: 200px;height: 200px;background: pink;}
       .son{position: absolute;left: 50%; top: 50%;transform: translate(-50%,-50%);width: 100px;height: 100px;background: yellow;}
     </css>
    

    以上是我个人常用的方法,但是万万没想到,就这个小小的几行代码, 就出现了上面的问题,
    解决方法:
    控制台元素审查找原因, 依次去除css上的样式,试用其他的居中方法实现该功能

    上例子 (元素居中定位)
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style lang="css">
          *{margin:0 auto;padding: 0;}
          html, body{width: 100%;height: 100%;}
          .dad{position: relative;width: 200px;height: 200px;margin-top: 300px;background: pink;}
          .son{position: absolute;left: 50%; top: 50%;transform: translate(-50%,-50%);width: 100px;height: 100px;background: yellow;}
          .dialog{position: fixed;top: 0; bottom: 0;left: 0;right: 0; background: rgba(148, 67, 29, 0.5);}
        </style>
      </head>
      <body>
        <div class="dad">
          <div class="son"></div>
        </div>
        <div class="dialog"></div>
      </body>
    </html>
    

    效果图


    0880c08b0110d9839e09.jpg

    这里我们看到显示的效果是没有问题,弹框也是正常的 接下来我们复现下上面提到的问题
    注意问题来了
    代码块

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style lang="css">
          *{margin:0 auto;padding: 0;}
          html, body{width: 100%;height: 100%;}
          .dad{position: relative;width: 200px;height: 200px;margin-top: 300px;background: pink;}
          .son{position: absolute;left: 50%; top: 50%;transform: translate(-50%,-50%);width: 100px;height: 100px;background: yellow;}
          .dialog{position: fixed;top: 0; bottom: 0;left: 0;right: 0; background: rgba(148, 67, 29, 0.5);}
        </style>
      </head>
      <body>
        <div class="dad">
          <div class="son">
            <div class="dialog"></div>
          </div>
        </div>
      </body>
    </html>
    

    效果图


    0880c08b0110d9c38b0e.jpg

    哎,我们惊奇的发现,dialog居然跟son一样大小,这个是为啥?
    那么咱们来区分下两个例子的区别
    css都是一样的,
    第一个例子,dad跟dialog是同级,
    第二个例子,将dialog放置在了son的下面

    接下来我们排查下问题,发现居然是transform的问题,
    解答: fixed定位的元素如果他的父级及以上有transform属性的话, 那么fixed属性就相当于转换成了absolute
    也就是说if(transform) {fixed = absolute};
    所以。在上述情况下, 会出现跟son一样大小, 因为dialog是基于son来做定位的,所以重叠到一起了;
    查看了一些文章,突然发现transform不仅对fixed有影响,还对其他的属性存在影响,
    具体内容请看张大神的文章
    CSS3 transform对普通元素的N多渲染影响
    转载请注明出处,觉得不错请点赞!!!

    相关文章

      网友评论

          本文标题:transform 对 position:fixed 的影响

          本文链接:https://www.haomeiwen.com/subject/msugdktx.html