два sub 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.

Или сделать второй div position:fixed вместо абсолютного.

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

Fiddle