CSS不透明度一两个div，负边缘

Question

https://jsfiddle.net/1zj71an3/1/

html:    
<div id="one">
aaaaaaaa
</div>
<div id="two">
bbbbbbbb
</div>
css:
#one{
  background-color:yellow;
  width:300px;
  height:300px;
  opacity: 0.5;
}
#two{
  background-color:blue;
  width:200px;
  height:200px;
  margin-top: -100px;
}

我想将不透明度设置为较大的div，并留下较小的分离不透明度1.问题是，较小的div也会影响较大的div。

CSS有没有办法停止这种行为？

谢谢！

Answer 1

只需添加：

  #one {
      position: relative;
      z-index: -1;
  }

或

z-index: 1;

使其他Div上方。