body {
    background-color: darkgray;
}

.container {
    background-color: antiquewhite;
    border: 1px solid blue;
    height: 2000px;
    /* position: relative; */
}

.box {
    border: 2px solid red;
    padding: 10px;
    /* height: 376px; */
    /* height: 47%; */
    /*Have to account for padding/borders in height*/
    box-sizing: border-box;
    /*box-sizing: border-box; takes into account padding and borders*/
    height: 400px;
    /*Makes height into 50% the container's height*/
    /* height: 50vh; */
    /*Makes height into 50% the viewport height*/
    /* overflow-y: scroll; */
    /*overlow-y:scroll; lets us account for the overflow with a scroll bar*/
}

.box1 {}

.box1 img {
    /* float: left; */
    /*Float lets us position text around the img*/
    position: sticky;
    /*sticks image to position and moves with screen while within container*/
    top: 20px;
}

.box2 img {
    border: 2px solid purple;
    /* float: right; */
    /* position: static; */
    /*default position value, sitting in it's "slot"*/
    /* position: relative; */
    /*img "sitting on top of page" so it can be moved around*/
    /* top: 50px; */
    /* left: 50px; */
    /* position: absolute; */
    /*img's slot is removed so everything ignores it*/
    /* top: 0; */
    /* left: 0; */
    /*while absolute the top and left positions check for a non-static (non-default) container and the positions are relative to that container (if it can't find one it defaults to the highest (body))*/
    /* position: fixed; */
    /*locks the image to the given space, moves with screen when scrolling*/
    /* top: 50%; */
    /* left: 50%; */
    /*not exactly half need to use below for actual middle*/
    /* translate: -50%; */
}

.box2 {
    /* position: relative; */
}