После использования «overflow-y: scroll» порядок размещения блоков DIV изменяется

Question

Мне нужно реализовать зеленую рамку в верхней части фиолетовой рамки, и фиолетовая коробка должна иметь эффект прокрутки. Но когда я использовал overflow-y: scroll , зеленое поле бежало за фиолетовым.

Мой код, как показано ниже :

.box_middle{

    margin-left: 50%;
    margin-top: 15%;
}

.class1{

    background-color: blueviolet;
    padding: 20px;
    width: 200px;
    height: 400px;
    overflow-y: scroll;
}

.class2{

    background-color: aquamarine;
    margin-top: -550px;
    margin-left: 150px;
    margin-right: 50px;
    width: 450px;
    height: 200px;
}

Answer 1

, чтобы вывести class2 поверх class1. использовать положение как абсолютное

.class2{

    background-color: aquamarine;
    position:absolute;
    margin-top: -550px;
    margin-left: 150px;
    margin-right: 50px;
    width: 450px;
    height: 200px;
}