动起手来发现自己啥也不会系列之 z-index

更新日期: 2017-01-17 阅读次数: 3517 分类: CSS

开始以为只需要在 div 1, div 2 上分别设置不同的 z-index 值就可以了。没想到完全不行。

<div id="card1">
</div>

<div id="card2">
</div>

#card1 {
	z-index: 1;
	width: 300px;
	height: 300px;
	background-color: yellow;
}

#card2 {
	z-index: 2;
	width: 200px;
	height: 200px;
	background-color: blue;
}

z-index not working

说好的,前后站队排列哪里去了?

z-index 属于 absolute positioning

好了,先冷静一下。

之前在 Two-Column Layout 与 Block Formatting Context 中,得知 CSS 2.1 的三种 positioning scheme:

  • Normal Flow: block formatting, inline formatting, 混排的 relative positioning
  • Floats: 先按照 normal flow 规则,然后左右移
  • Absolute positioning: 此模型中的 box 会从 normal flow 中移除

所有定位方式无非这三种。而 z-index 明显属于 Absolute positioning。

既然是 Absolute positioning,那就得给 box 加上 position: absolute; (这句话并不严谨,实际上 fixed 也可以) 父级 box 加上 position: relative;

为何他爹要使用 relative? 细节参考 CSS Positioning

修正之后

z-index with position: absolute

#card1 {
	z-index: 1;
	width: 300px;
	height: 300px;
	background-color: yellow;
	position: absolute;
}

#card2 {
	z-index: 2;
	width: 200px;
	height: 200px;
	background-color: blue;
	position: absolute;
}

所以,口诀就是,“要使 z-index 生效,先给 box 加上 position: absolute; 再给他爹加上 position: relative;”

absolute positioning 一定要求 position 为 absolute 么?

A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.

An absolutely positioned element is an element whose computed position property is absolute or fixed.

从 MDN 的解释来看,absolute or fixed 的都可以。上面的代码中,把 abs 改成 fixed, 布局仍然符合预期。不使用 fixed 原因是,fixed 的应用场景太有限了,除了 back to top, fixed sidebar 其他场景不多见。用 abs 稍微好一些,所以就使用 abs 了。

Stacking Order

盗图一张

Stacking Order

看上去,有点乱。

z-index 为负数,0,正数的情况,很好理解。

但是,block level box, inline box, floated box 也加进来就感觉复杂了。

如何赋值

z-index 的默认值是 auto

设置数值的时候 -1, 0, 1, 2, 3 还是 -99, 0, 99, 100

这取决于页面的复杂度,如果只有一个 div 需要置前显示,给个 999 就行了。

如果有一堆 div 需要排列,那根据 1, 2, 3 就好了。

如果是多人合作,每个人分个号段就好。比如,你用 1xx, 我用 2xx

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
2020年05月01日 国际劳动节
2020年05月04日 五四青年节
2020年05月05日 立夏
2020年05月08日 世界红十字日
查看更多节日