兩個子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

您需要將.sub1position設置爲relative（而不是absolute）。

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

我希望這會有所幫助。

Answer 2

據我所知，有兩種可能的解決方案要麼把第二個div放在父div之外。這樣.sub2將不會是父div的子節點。

或使第二格position:fixed而不是絕對。

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

Fiddle