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'的父图像。设置父“亲戚”的位置也不起作用。我还在Chrome，edge，opera等多种浏览器中测试了代码，但问题仍然存在。请告诉我这里到底发生了什么。谢谢你的到来。

Answer 1

设置父 position:relative 它运行正常。如果你没有设置父位置：相对，它将相对于浏览器窗口。

＆＃13;

.hi{
  position:relative;
  width:100px;
  height:200px;
  background:red;
  }
.hi img{
  position:absolute;
  left:25%;
  top:0%;
  width:50%;
  height:100%;
}
.ihi img{
  position:absolute;
  left:25%;
  top:25%;
  width:50%;
  height:50%;
}

＆＃13;

<div class="hi">
    <img alt="This shuould be an image" src="https://i.stack.imgur.com/tSUsk.jpg">
    <div class="ihi">
      <img alt="This shuould be inside of main image" src="https://i.stack.imgur.com/T0mrA.jpg">
    </div>
  </div>

＆＃13;

Answer 2

正如Jon Uleis所说，第一张图片不是第二张图片的父母。实际上，图像不能包含其他元素。所以，我不认为你可以使用CSS来定位关于第一张图像的第二张图像。

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

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，我没有你正在使用的图像，但我知道你还在使用猫：P

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

HTML

CSS

2 个答案: