是否可以将元素锚定到居中元素？

Question

是否可以将文本区域锚定到页面中间居中的图像，以便在屏幕尺寸更改时它不会移出图像？

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

在容器中使用 'position:relative'，在文本区域和图像中使用 'position: absolute'。

CSS绝对属性：元素相对于其第一个定位（非静态）祖先元素定位。

.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;
}

Answer 2

.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>

解释：

是否可以将元素锚定到居中元素？

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

html

css

centering