[CSS] absolute 요소 컨테이너 외부에 배치하기

보통 absolute를 사용하여 다음과 같이 설정하여 컨테이너 내부에 요소를 배치하였다.

<style>
    .test-relative-box {
        margin: 300px auto;
    }

    .test-relative-box {
        position: relative;
        width: 200px;
        height: 100px;
        background-color: gray;
        margin: 100px auto;
    }

    .test-absolute-box {
        position: absolute;
        width: 40%;
        height: 40%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: greenyellow;
    }

    .test-absolute-box.left-top-inside {
        left: 0;
        top: 0;
    }

    .test-absolute-box.right-top-inside {
        right: 0;
        top: 0;
    }

    .test-absolute-box.left-bottom-inside {
        left: 0;
        bottom: 0;
    }

    .test-absolute-box.right-bottom-inside {
        right: 0;
        bottom: 0;
    }
    
</style>

<div class="test-relative-box">
    <div class="test-absolute-box left-top-inside edge">left 0<br/>top 0</div>
    <div class="test-absolute-box right-top-inside edge">right 0<br/>top 0</div>
    <div class="test-absolute-box left-bottom-inside edge">left 0<br/>bottom 0</div>
    <div class="test-absolute-box right-bottom-inside edge">right 0<br/>bottom 0</div>
</div>

absolute 요소를 컨테이너 외부에 배치하고 싶다면 다음과 같이 '100%' 값을 이용하여 요소를 컨테이너 끝으로 배치하면 된다.

<style>
    .test-relative-box {
        position: relative;
        width: 200px;
        height: 100px;
        background-color: gray;
        margin: 200px auto;
    }

    .test-absolute-box {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: skyblue;
    }

    .test-absolute-box.edge {
        background-color: lightpink;
    }

    .test-absolute-box.left-outside {
        right: 100%;
    }

    .test-absolute-box.right-outside {
        left: 100%;
    }

    .test-absolute-box.bottom-outside {
        top: 100%;
    }

    .test-absolute-box.top-outside {
        bottom: 100%;
    }

    .test-absolute-box.left-bottom-outside {
        right: 100%;
        top: 100%;
    }

    .test-absolute-box.right-bottom-outside {
        left: 100%;
        top: 100%;
    }
    
    .test-absolute-box.left-top-outside {
        right: 100%;
        bottom: 100%;
    }

    .test-absolute-box.right-top-outside {
        left: 100%;
        bottom: 100%;
    }
</style>


<div class="test-relative-box">
    <div class="test-absolute-box left-outside">right 100%</div>
    <div class="test-absolute-box right-outside">left 100%</div>
    <div class="test-absolute-box bottom-outside">top 100%</div>
    <div class="test-absolute-box top-outside">bottom 100%</div>
    <div class="test-absolute-box left-bottom-outside edge">right 100%<br/>top 100%</div>
    <div class="test-absolute-box right-bottom-outside edge">left 100%<br/>top 100%</div>
    <div class="test-absolute-box left-top-outside edge">right 100%<br/>bottom 100%</div>
    <div class="test-absolute-box right-top-outside edge">left 100%<br/>bottom 100%</div>
</div>