Two DIVs one above the other without deforming - html

Question

This is my problem, I have two <div> exactly the same, one above the other, when I write something I the one that's behind the other one. The "forward" <div> moves down. (not easy to explain sorry)
Here example:
<div class="box1">TEXT THAT DEFORM box11 <div class="box11"></div></div>
And the CSS:
.box1
{
width: 90%;
height: 16vh;
background-color: #fff;
margin: auto;
border: 1px solid #ddd;
}
.box11
{
width: 100%;
height: 100%;
background-color: #eee;
opacity: 1;
background-image: url(../medias/box1.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 70% 50%;
}
Thanks
IMAGES
This is what I want:
And this is what happen when I write on the first DIV:

Answer 1

This is how you need to do, you set the parent (box1) to position: relative and the child (box11) to position: absolute. This way it doesn't get affected by the text written in the parent as it is taken out of the flow and as such float on top of its content.
To keep the position: absolute child related to its parent, the parent also needs to have positioning other than static, in this case I used relative.
.box1
{
position: relative;
width: 90%;
height: 16vh;
background-color: #fff;
margin: auto;
border: 1px solid #ddd;
}
.box11
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #eee;
opacity: 1;
background-image: url(../medias/box1.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 70% 50%;
}
<div class="box1">TEXT THAT DEFORM box11 <div class="box11"></div></div>