Is it possible to anchor an element to a centered element? - html

Question

Is it possible to anchor a textarea to an image that is centered in the middle of the page, so that it doesn't move out of the image when the screen size changes?
Example on jsfiddle: https://jsfiddle.net/rxg7t2ca/1/
.container {
width: 60%;
margin: 0 auto;
/* border: 2px solid blue; */
}
#cat {
display: block;
margin: 0 auto;
}
.box1 {
position: relative;
top: -250px;
left: 30px;
width: 100px;
height: 100px;
}
<div class="container">
<img src="http://i.imgur.com/a2Wd9D2.jpg" height=300px id="cat" />
<textarea class="box1"> This is a text box </textarea>
</div>

Answer 1

.container {
position: relative;
width: 60%;
margin: 0 auto;
border: 2px solid blue;
}
#cat {
width: 100%;
object-fit: cover; /* 1 */
vertical-align: bottom; /* 2 */
}
.box1 {
position: absolute; /* 3 */
top: 50%; /* 3 */
left: 50%; /* 3 */
transform: translate(-50%, -50%); /* 3 */
width: 100px;
height: 100px;
}
<div class="container">
<img src="http://i.imgur.com/a2Wd9D2.jpg" height=300px id="cat" />
<textarea class="box1"> This is a text box </textarea>
</div>
Explanations:
Why isn't object-fit working in flexbox?
Mystery white space underneath image tag
Element will not stay centered, especially when re-sizing screen

Answer 2

In the container use 'position:relative', and in the textarea and in the image use 'position: absolute'.
CSS absolute property: The element is positioned relative to its first positioned (not static) ancestor element.
.container{
width: 60%;
margin: 0 auto;
position:relative;
/* border: 2px solid blue; */
}
#cat{
position: absolute;
top: 0px;
left: 0px;
display: block;
margin: 0 auto;
}
.box1{
position: absolute;
top: 25px;
left: 30px;
width: 100px;
height: 100px;
}