网络日志

CSS 定位补充

1、定位叠放次序

在使用定位布局时,有可能出现盒子叠盒子的情况,此时,可以使用 z-index 来控制盒子的次序。

div {
  position: absolute;
  z-index: 1;
}

z-index 的数值可以是正整数、负整数或 0,默认是 auto。数值越大,盒子越靠上;数值相同,则按照书写顺序后来者居上。

只有定位的盒子才有 z-index 属性。

绝对定位/固定定位的盒子会完全压住下面的盒子,而浮动元素只会压住它后面标准流的盒子,而不会压住盒子里面的文字或图片,因为浮动最初产生的目的就是为了做文字环绕的效果。

2、偏移量属性的冲突

如果一个定位的盒子既有 left 属性,又有 right 属性,则默认会执行 left 属性,同理,如果盒子同时有 top、bottom 的属性,默认执行 top 属性,忽略 bottom 属性。