zoukankan      html  css  js  c++  java
  • 利用transform的bug使fixed相对于父级定位

    首先,大家都清楚,元素使用fixed之后,若不设置top与left则会相对于最近的使用定位的父元素,并位于父元素的原点位置设置top与left值时,则会相对于窗口定位。但无论如何,此时仍相对于窗口定位,在此不过多描述。

    今天发现的是当某一元素使用transform属性后,其所有使用fixed定位的子元素的fixed属性都会失效。此处可查看W3C文档 https://www.w3.org/TR/css-transforms-1/#issue-ca2c412c

    因此可以利用此bug时fixed元素相对于父级定位,而非相对于窗口定位。

    <div class="trans-box">
        <div class="outer">
            <div class="inter"></div>
        </div>
    </div>

    在此需要注意,当inter元素设置top与left值时,则会相对于outer之外最近的使用定位的元素,而非相对于outer元素。有兴趣的朋友可以demo下试试。

    *{
        padding: 0;
        margin: 0;
    }
    body{
        height: 2000px;
    }
    .outer{
        position: relative;
        width: 800px;
        height: 800px;
        background: #ff0;
        top: 100px;
        left: 100px;
        overflow: auto;
    }
    .inter{
        position: fixed;
        width: 200px;
        height: 200px;
        background:#f00;
        top: 50px;
        left: 50px;
    }
    .trans-box{
        width: 1000px;
        height: 1000px;
        background: #c0c0c0;
        position: relative;
        top:50px;
        left: 50px;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
    }

     

  • 相关阅读:
    AD7606笔记
    转Keil 中使用 STM32F4xx 硬件浮点单元
    旋转编码器
    PT100/PT1000
    电压跟随器
    段式液晶驱动方法
    物联网的架构
    物联网的操作系统
    C8051开发环境
    解决time命令输出信息的重定向问题
  • 原文地址:https://www.cnblogs.com/pomelott/p/7425650.html
Copyright © 2011-2022 走看看