transform对定位元素的影响

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、温故知新

absolute：生成绝对定位的元素，相对于除position:static 定位以外的第一个有定位属性的父元素进行定位，若父元素没有定位属性则相对于浏览器窗口的左上角定位，定位的元素不再占据文档的空间。

relative：生成相对定位的元素，相对于其正常位置进行定位,定位的元素仍然占据文档的空间;

2、发现问题

   css//
     div {

            width: 150px;

            height: 150px;

            margin-left: 80px;

            background-color: #00aabb;

        a {

            position: absolute;

            top: 0;

            left: 0;

            width: 70px;

            height: 70px;

            background-color: green;

        }

标签//

<div>

    <a href=""></a>

</div>

效果图

要是在div上面加一个transform:translate(0)后的效果图如下：

是不是看出问题来了，对加了这个属性后，起到了一个类似定位的作用。

那么这个属性是类似absolute还是relative,这里我就不写事例了，直接说出结果transform的作用类似于relative的作用，

因为其还占据了空间没有脱离文档流，但也仅仅是类似relative的作用，你给其加了这个属性的元素加定位值（top:20px;left:20px）是没任何效果

3、加了transform的元素改变其层叠关系。

        div {

            width: 150px;

            height: 150px;

            margin-left: 80px;

            background-color: #00aabb;

        }

        p{

            width: 150px;

            height: 150px;

            margin-top: -80px;

            background-color: gold;

<div></div>

<p></p>

看上面代码知p元素会覆盖一部分div元素。如果在div上面加一个transform属性(如：translate(0));情况就反过来了，如下图