对css opacity属性的验证
对于一个opacity < 1的元素，它具有这样的特性：
1.其具有一个独立的层叠上下文
2.其内部元素无法脱离这个上下文（始终保持opacity的样式）
3.其外部元素无法进入这个上下文（无法具有opacity的样式）
验证用例：
效果图：
<style>
div {
height: 170px; background-color: red; margin-bottom: 10px;
font-size: 20px; color: white; width: 500px;
}
h1 {
color: black; font-size: 20px;
}
.div1 {
opacity: 0.5; position: relative; z-index: 2;
}
.bg-red {
background-color: red;
}
.div2 {
opacity: 0.3; position: relative;
}
.div2 > .div2H1-1 {
position: absolute; background-color: red; top: -85px;
}
.h1-2 {
position: absolute; top: 290px;
}
</style>
<div class="div1">
<p>div1</p>
opacity: 0.5; position: relative; z-index: 2;
<h1 class="bg-red">h1 in div1 background-color: red</h1>
</div>
<div class="div2">
<p>div2</p>
opacity: 0.3; position: relative;
<h1 class="div2H1-1">h1 in div2 position: absolute; background-color: red; top: -85px;</h1>
</div>
<h1 class="h1-2">h1 in body position: absolute; top: 290px;</h1>
结论：
1.当试图将div2中的h1放入div1中时，可以验证其在脱离文档流的前提下，始终保持着div2中opacity的样式
2.当试图将body中的h1放入div2中时，可以验证body中的h1是不具备div2中opacity的样式
