position: fixed;  브라우저창

position: relative; 부모창 
position: absolute; 자식창

position: fixed; 는 말그대로 브라우저 웹사이트 노출하는부분에  대상으로 고정합니다.

position: relative; 은 부모 창으로서 position: absolute;  잡아주는 역할로서  position: absolute; 을 사용할려면 꼭필요하죠.

노출  층 설정은 z-index:1 ~~~~ 숫자 높을수록 상위에노출됩니다.

예

<style>
    .box{position: relative;width: 500px; height: 500px; background: #000}
    .box2{position: absolute;width: 200px; height: 200px; z-index: 20;left: 60px;top: 60px;background: #fff}
    .box3{position: fixed;width: 200px; height: 200px; z-index:10;left: 200px;top: 100px;background:#FF0000}
< /style>

<div class="box">
    <div class="box2"></div>
    <div class="box3"></div>
< /div>

box3은 box내부에있더라도position: fixed을 사용하면 상관없이 브라우저 창에 기준으로 위치를 잡아서 노출합니다. 또한box3은  z-index:10이고 box2가 z-index:20일경우 box2하위에노출됩니다.