个中就归纳成分的变形,其中就归纳成分的变形

z-index

  在固化中的堆叠z-index中曾经提到过,CSS三的出现对过去的很多平整发出了挑衅,对层叠上下文z-index的震慑越来越鲜明,当中就包含成分的变形transform不是none的情况

  成分的变形transform不是none使该因素得以采纳堆叠z-index,从而得以覆盖平日流成分和低级别的定位成分

  在上面例子中,show贰和show一都以日常成分,show二通过安装margin负值,覆盖了show1。不过,通过变更show壹的’transform’属性可以变更其层叠效果

 

定点父级

  一般地,相对定位元素设置宽度百分比时,参照的是稳定父级。定位父级是率先个position值为非static值的先人元素。不过,如若祖先成分中存在装置了transform要素不为none的要素,也得以变成一定父级

  以下为例子中的HTML结构,当.transform要素设置transform:scale(1)时,该因素变为固定父级,不然.parent要素是一定父级

<div class="parent" style="position:relative;width: 200px;height: 30px;">
    <div class="transform" style="width: 80px;height: 80px;">
        <div class="test" style="position:absolute;width:100%"></div>
    </div>
</div>

日前的话

  变形transform理所当然是二个用来处理移动、旋转、缩放和倾斜等基本操作的CSS三属性,但该属性除了成功其本职工作之后,还对普通成分造成了意想不到的熏陶,本文将详细介绍transform对成分造成的三个副功能

 

overflow

  对于溢出overflow失效的情形爆发在overflow在绝对定位成分及其包蕴块之间,如下所示

  给设置overflow的因素采纳transform或在设置overflow的要素与溢出成分之间的成分设置transform,可以消除overflow失效的题材

  包容性:在chrome和safari浏览器下,唯有设置overflow的成分与溢出成分之间的因素设置transform时,才使得;而IE九+和firefox浏览器,对于上述三种设置都使得

  [注意]在chrome浏览器下,将成分的transform质量设置为none,恐怕会使成分从静态地方移动到left:0、top:0的职责

 

overflow

  对于溢出overflow失效的景观爆发在overflow在相对定位成分及其包蕴块之间,如下所示

  给设置overflow的要素运用transform或在设置overflow的要素与溢出成分之间的元素设置transform,可以化解overflow失效的难点

  包容性:在chrome和safari浏览器下,只有设置overflow的要素与溢出成分之间的要素设置transform时,才使得;而IE玖+和firefox浏览器,对于上述三种设置都灵验

  [注意]在chrome浏览器下,将成分的transform天性设置为none,恐怕会使成分从静态地方移动到left:0、top:0的地点

 

z-index

  在一直中的堆叠z-index中曾经提到过,CSS叁的产出对过去的无数条条框框发出了挑衅,对层叠上下文z-index的影响愈来愈明显,当中就归纳成分的变形transform不是none的情况

  成分的变形transform不是none使该因素得以动用堆叠z-index,从而得以覆盖平常流成分和低级其余原则性成分

  在上边例子中,show贰和show一都以壹般成分,show二通过设置margin负值,覆盖了show一。但是,通过变更show一的’transform’属性能够转移其层叠效果

 

fixed

  一贯定位fixed使成分相对于视窗举行确定地点,不趁着页面滚动条的轮转而滚动。但是,如若在固定定位成分的父级设置transform不为none,则会将定位定位降级为纯属定位absolute

  包容性:IE浏览器无此表现,依旧保持fixed状态

  [注意]在chrome浏览器下,将一定定位成分父级的transform品质设置为none,大概会使成分从静态地方移动到left:0、top:0的职位。借使某些父级成分设置为宽度百分之百,则fixed将有限支撑在原来职位不会改变

 

fixed

  固定定位fixed使成分相对于视窗实行固定,不趁早页面滚动条的滚动而滚动。可是,即使在一定定位成分的父级设置transform不为none,则会将定位定位降级为相对定位absolute

  包容性:IE浏览器无此突显,仍旧维持fixed状态

  [注意]在chrome浏览器下,将一定定位成分父级的transform品质设置为none,或者会使元素从静态地点移动到left:0、top:0的职分。借使有些父级成分设置为宽度百分百,则fixed将保险在本来地点不会改变

 

固化父级

  一般地,相对定位成分设置宽度百分比时,参照的是原则性父级。定位父级是第3个position值为非static值的祖宗成分。但是,如果祖先成分中留存装置了transform要素不为none的成分,也足以改为一定父级

  以下为例子中的HTML结构,当.transform要素设置transform:scale(1)时,该因素变为固定父级,不然.parent要素是一向父级

<div class="parent" style="position:relative;width: 200px;height: 30px;">
    <div class="transform" style="width: 80px;height: 80px;">
        <div class="test" style="position:absolute;width:100%"></div>
    </div>
</div>

前方的话

  变形transform自然是1个用来处理移动、旋转、缩放和倾斜等基本操作的CSS3属性,但该属性除了成功其本职工作之后,还对一般性成分造成了不测的震慑,本文将详细介绍transform对成分造成的多个副成效

 

相关文章