初学者在学习CSS中定位的使用时,往往遵循子绝父相的原则。这样的设置用于我们需要让某个子元素相对父元素进行绝对定位布局。例如:
<style>
.header {
position: relative;
height: 105px;
background-color: pink;
}
.logo {
position: absolute;
top: 25px;
left: 0;
height: 175px;
width: 56px;
}
</style>
<body>
<div class="header w">
<div class="logo"></div>
</div>
</body>
这样我们就能使孩子logo相对于父亲w进行定位布局。如果没有给父亲设置相对定位,孩子logo则将继续向祖先寻找定位基准。
事实上,父元素设置了position:fixed属性的话子元素一样可以根据相对于父元素进行定位。之所以一直强调的是子绝父相,这是因为在标准流下,我们如果给父元素设置fixed来将其作为子元素的基准,那么因为设置了fixed属性的元素是脱离标准流的,所以下面的盒子会填补设置了fixed属性的位置。在大多数情况下,我们不希望这种事请发生,而设置了relative属性的元素是不会脱离标准流的,因此使用子绝父相的原则。还有一点需要提及,设置了absolute的元素同样会脱离标准流。