html - 这个用于相对定位的 css 代码有什么问题 w.r.t. parent ？

Question

这是一个臭名昭著的问题。我创建了以下 html 和 css 代码:

HTML

<div class="hi">
    <img alt="This shuould be an image" src="Images/img1.jpg">
    <div class="ihi">
      <img alt="This shuould be inside of main image" src="Images/img2.jpg">
    </div>
  </div>

CSS

.hi img{
  position:absolute;
  left:25%;
  top:0%;
  width:50%;
  height:100%;
}
.ihi img{
  position:absolute;
  left:25%;
  top:25%;
  width:50%;
  height:50%;
}

父元素当然显示正常，但问题出现在子元素上。类为“ihi”的子元素始终定位 w.r.t.浏览器窗口而不是具有类“hi”的父图像。设置 parent “亲戚”的职位也没有用。我还在 chrome、edge、opera 等多种浏览器中测试了代码，但问题仍然存在。请告诉我这里到底发生了什么。提前致谢。

Answer 1

正如 Jon Uleis 所提到的，第一张图片不是第二张图片的父图片。实际上，图像不能包含其他元素。所以，我认为您不能使用 CSS 相对于第一张图片定位第二张图片。

我认为您可以按照您想要放置第一张图片的方式放置包含两张图片的 div 来获得所需的效果。然后将第一张图片设为 100% 宽度和高度。您甚至不需要定位第一张图片。然后按照您想要的方式在第二张图片上设置位置和大小...

body {
  margin: 0;
}

.hi {
  position: absolute;
  left: 25%;
  width: 50%;
  height: 100%;
}

.hi img {
  width: 100%;
  height: 100%;
}

.ihi img {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
}

<div class="hi">
  <img alt="This shuould be an image" src="http://lorempixel.com/400/200/cats/1">
  <div class="ihi">
    <img alt="This shuould be inside of main image" src="http://lorempixel.com/400/200/cats/2">
  </div>
</div>

请注意，我没有您使用的图片，但我知道您使用的是猫 :P