I can't position the image outside the div

``I have set a division position to absolute and its parent to relative. When I type top:-2px, then instead of going up outside the div, the 2px of the image is cut and the image remains inside the div. I can't figure out why the image is not going outside the div. The image is not going outside the division even after writing top:-2px

This is sass:

.composition{

position: relative;

&__photo{
    width: 55%;
    box-shadow: 0 1.5rem 4rem rgba($color-black,.4);
    border-radius: 2px;
    position: absolute;

    &--1{
        left: 0;
        top: -2rem;

    }

    &--2{
        top: 2rem; 
        right: 0;
    }

    &--3{
        top: 10rem;
        left: 20%;
    }
}

}

.row{
width: $grid-width;
margin: 0 auto;
overflow: auto;


&:not(:last-child){
    margin-bottom: $gutter-vertical;}


[class^="col-"]{
    float: left;

    &:not(:last-child){
        margin-right: $gutter-horizontal;
    }
}

.col-1-of-2{
    width: calc((100% - #{$gutter-horizontal}) / 2);

}

.col-1-of-3{
    width: calc((100% - 2* #{$gutter-horizontal})/3);
}

}

This is html:

<div class="row">
                <div class="col-1-of-2">
                    <h3 class="heading-tertiary u-margin-botton-small">You're Going To Fall In Love With Yoga</h3>
                    <p class="paragraph"></p>
                
                    <h3 class="heading-tertiary u-margin-botton-small">practice yoga like never before</h3>
                    <p class="paragraph">..</p>
                    <a href="" class="btn-txt">Learn More &rarr;</a>
                </div>
                
                <div class="col-1-of-2">
                    <div class="composition">  
                        <img src="img/nat-1-large.jpg" alt="photo 1" class="composition__photo composition__photo--1">
                        <img src="img/nat-2-large.jpg" alt="photo 2" class="composition__photo composition__photo--2">
                        <img src="img/nat-3-large.jpg" alt="photo 3" class="composition__photo composition__photo--3">
                    </div>
                </div>
           </div>