css 팁자료 position
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하위에노출됩니다.