How to make an adaptive block inside another one?

Question

css

Hello!
How to write a responsive design for two blocks (divs), one inside the other, so that when the size of the browser window (black square) inside the red block decreases, the brown one remains in place and does not move?
For example, if the red block is the slider on which I want to place the animation, but so that this animation block is only in 1 strict place.
Thank you all in advance!

Answer 1

.red{ /* красный блок */
  position: relative;
}

.brown{ /* коричныевый блок */
  position: absolute;
}

Answer 2

Eugene is correct. And position the brown with top, left etc.