视频中inline-block与block元素的层叠顺序如何理解
小王子抓猫咪
2016-04-17 18:12
inline-block与block元素都是普通元素，没有定位也没有其他CSS3属性。于是它们都属于html这个天然的根层叠上下文元素中。那么它们的层叠水平是遵循7阶层叠顺序的。文中又说了inline-block和block元素的层叠顺序是同阶的，那么应该遵循后来居上原则。背景色应该按照后来居上原则从而block元素的背景色应该在inline-block元素之上才对。实际效果为什么不是这样呢？
问题就是如何理解背景色是层叠顺序，而不是后来居上的准则呢？如果按照层叠顺序，又是如何得出第一个元素的背景色能覆盖第二个元素的背景色呢？
根据我在chrome浏览器中的测试，我将这两个元素的顺序倒过来，也就是先有block元素，再有inline-block元素。那么会发现inline-block元素的背景色覆盖了block元素的背景色。这和前面的案例中效果一致。那么应该说inline-block元素的层叠顺序应该高于block元素的层叠顺序。从而按照层叠顺序出现inline-block元素的背景色覆盖了block元素的背景色。
哪有同学能帮忙解释一下吗。这里有些不明白。
3回答
-
- P妞酱酱
- 2016-12-01 11:51:59
我的理解是：
背景的层叠水平是遵循7阶层叠顺序的（inline-block>block）；
为何文字遵循后来居上原则？根据老师的意思，上面的文字是inline-block（被.inline-block设置），下面的文字是display:inline;（文字本身的属性），而inline-block和inline是平级的，所以遵循后来居上原则。我认为具体文字的display属性是什么要看到html代码才能知道吧，看具体是被什么标签包裹，这里看不到所以根据老师的表达猜测是这样。
-
- 思椋
- 2016-07-03 14:29:04
代码中没有定位和z-index属性干扰的话，inline-block样式和block样式是同级的，应该遵循后来居上原则，而在父级相同，（如文字它属于inline与inline-block同级故遵守），子级inline-block>block,即inline-block元素的层叠顺序应该高于block元素的层叠顺序。
-
- 旅行的癞蛤蟆
- 2016-04-17 19:19:02
后来居上原则好像要有定位吧，老师代码中没有定位呀。按照7阶层叠水平来看，block比inline、inline-block的层叠顺序低。
CSS深入理解之z-index
40882 学习 · 31 问题
相似问题