html - 两个子 div，一个相对父 div 的位置，另一个相对浏览器？

Question

这是我的html
a.html

<div class='main'>
  <div class="sub1"></div>
  <div class="sub2"></div>
</div>

和CSS:
a.css

.main {
  width: 200px;
  height: 400px;
  margin-left: 100px;
  position: relative;
  border: 1px solid red;
}

.sub1 {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: absolute;
  left: 0px;
}

.sub2 {
  width: 50px;
  height: 300px;
  position: absolute;
  top: 30px;
  left: 20px;
  border: 1px solid green;
}  

现在我要div.sub1是相对于父div的，
而div.sub2是相对于浏览器的，
如何将样式设置为 div.sub2？

Answer 1

据我所知，有两种可能的解决方案，要么将第二个 div 放在父 div 之外。这样 .sub2 就不会是父 div 的子元素了。

或者使第二个 div position:fixed 而不是绝对的。

.sub2 {
  width: 50px;
  height: 300px;
  position: fixed;
  top: 30px;
  left: 20px;
  border: 1px solid green;
} 

Fiddle