[CSS] position absolute, relative

position absolute 와 relative 에 대해서 알아보자.

1. absolute 

   - 가장 가까운 조상 객체 , relative 속성을 갖는 객체를 기준으로 삼는다.

   - 단독으로 사용되어 다른 객체에 영향을 주지 않는다.

2. relative

   - 다른 객체에 영향을 주지 않으며 단독으로 이동된다.

absolute 와 relative 를 이용한 간단한 반응형 뷰어

html

<div style="position:relative;">이거슨 아이언맨입니다.</div>
<div style="position:absolute; top:0px; right:0px;" id="close">닫기</div>
<div class="wrap" style="display:none;">
    <div class="view" id="viewer">
        <img src="" />
    </div>
</div>
<div>
    <div>
        <img src="ironman1.jpg width="500" class="btn" />
    </div>
    <div>
        <img src="ironman2.jpg" width="500" class="btn" />
    </div>
</div>

css

.wrap {
    position: relative;
}

.view{
    position: absolute;
    text-align: center;
    width: 100%;
}

#viewer > img {
    max-width: 100%;
    max-height: 768px;
}

javascript

<script>
    $(function(){
        $(".btn").click(function(){
            $("#viewer img").attr("src", $(this).attr("src"));
            $("#viewer img").css("z-index", '9999');
            $(".wrap").show();
        });

        $("#close").click(function(){
            $(".wrap").hide();
        });
    });

</script>