img位置绝对位于div内的绝对位置

Question

所以我有一个主要的div元素，其位置为：relative。 在里面有另一个div位置：绝对。 在div里面我想拥有它也会对它的父元素保持绝对位置，但是我无法让它工作。

是否有任何解决方法而不必将img嵌套在另一个div中？ （由于我的叠加形状，我遇到了问题，我想要转换图像）

.1 {  position: relative;  }

.2 {  position: absolute;  }

.2 img {  position: absolute;  }

<div class="1">
  <div class="2">
    <img src="foo.jpg">
  </div>
</div>

Answer 1

有效！

据我所知，

position: absolute是相对于第一个不是position: static的父元素，这是默认情况下每个元素的位置。

.parent {
  position: relative;
}

.child {
  left: 100px;
  position: absolute;
}

img {
  left: 100px;
  position: absolute;
}

<div class="parent">
  <div class="child">
    <img src="https://via.placeholder.com/200x150">
  </div>
</div>