CSS入门

相对定位与绝对定位

此课程是收费课程,请先购买或加入会员后再访问。

这一集给大家介绍的是CSS中的定位。定位分为两种,分别是相对定位绝对定位

<html>
<head>
    <meta charset="utf-8">

    <style>
        #parent {
            background-color: yellow;
            width: 800px;
            border:1px solid;
        }

        #child1, #child2 {
            width: 300px;
            height: 300px;
        }

        #child1 {
            background-color: darkgrey;
        }

        #child2 {
            background-color: #1f99b0;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
</body>
</html>

相对定位

还是使用上次咱们讲浮动用到的这几个div,现在给child1设置一个定位

#child1 {
    /* ... */

    position: relative;
}

只设置这么一点点,是看不到任何效果的了,还需要设置一下它的位置。

#child1 {
    /* ... */

    top:100px;
    left:150px;
}

相对定位

刷新后,会发现child1,向下移动了100px,向右移动了150px。而且现在,它还盖在了其他元素上。这个就是相对定位了。元素相对自己原来的位置,按照指定的值移动。我们可以尝试的把left改成

#child1 {
    /* ... */

    left: 850px;
}

相对定位

发现这个div已经超出了parent的范围了。这就说明页面其他的元素,parentchild2不受任何影响。它们认为child1这个元素,依然还在以前的位置上。

绝对定位1

div的定位,改为如下代码

#child1 {
    background-color: darkgrey;
    position: absolute;
    top: 200px;
    right: 250px;
}

这次,咱们使用的是absolute,它就是绝对定位了。设置的值,分别是两个方向。刷新后,发现这次的绝对定位,是相对于整个页面的。当我们拉大浏览器,div1的位置,始终保持着定义的这个值。

绝对定位

当做了绝对定位后,其他元素,会认为当前元素已经不在这里了。parent里面,现在就只有child2这一个元素。

绝对定位2

这次我们在上面代码的基础上,再来加一点点小变化。给parent设置一个相对定位

 #parent {
    /* ... */

    position: relative;
}

刷新后,发现这次的定位又不一样了。量一下发现,child1的位置,变成了相对父元素的位置。调整浏览器大小,发现child1不会再根据页面大小而移动了。

绝对定位

z-index

再来做一个测试,给child1,也做一个绝对定位,我们看看会发生什么情况?

#child2 {
    background-color: #1f99b0;
    position: absolute;
    top: 100px;
    left: 150px;
}

parent是直接看不见了,因为它认为自己内部已经没有任何元素了。child1child2现在叠在了一起。现在需要讨论的一个问题是,到底这两个元素,哪个在上面,哪个在下面?

z-index

默认来说,就是html中,后面的元素,在前面元素的上面。咱们可以尝试把它们两个换一个位置。

<div id="parent">
    <div id="child2"></div>
    <div id="child1"></div>
</div>

z-index

果然,这样灰色child1,就会盖在蓝色child2上面了。当然很多时候,根本不能修改html元素的结构,如果你想改变它们的层级,最好的方式是使用z-index属性。

默认所有元素的z-index都是0,谁的z-index大,谁就在上面。

#child2 {
    /* ... */

    z-index: 1;
}

z-index

child2z-index设置成1。这样它就会到上面去。如果这时你把child1z-index设置成2child2又会到顶层了。

总结

类型 说明
相对定位 相对于自己以前的位置移动。其他元素认为它依然在以前的位置。
绝对定位1 如果祖先元素(不一定是父元素)没有定位(不管是绝对还是相对)相对于整个页面做定位。
绝对定位2 如果祖先元素有定位,相对于祖先元素。
z-index 默认z-index0,谁的z-index大,谁就在上面。