stack context hierarchy

html statck context (root)

.class2 (z-index=2)

.class3 (z-index = 1)

.class4 (z-index=10)

.class1 因为z-index的值为auto,所以没有创建stack context

stack context 的特点:

  1. 每个z-index的大小有作用范围。z-index再大也大不过创建parent context 元素的的z-index。
  2. 所以#id4的最大高度屈居于#id3的z-index

the Result

HTML (root stack context)

.class2 (z-index=2)

.class3 (z-index=1)

.class4 (z-index=10)

问题 .class4和.class2元素的顺序是怎么样的?

<div>
    <div class="class1">hello</div>
    <div class="class2">world</div>
</div>
正确理解 z-index

正确理解 z-index

2018-10-30 12:15:47 3 361
这里是评论

相关推荐