Question

我想将一张图像放在另一张图像上，同时保持下面的内容不会向上移动。我知道你可以使用绝对定位，但这也会改变图像背后的所有内容。有谁知道如何实现这个目标？

我有以下示例，我需要编辑将圆圈放在正方形的顶部：

https://jsfiddle.net/Jaron787/2mv98mkp/2/

HTML

AVPlayerViewController* audioPlayer = [[AVPlayerViewController alloc] init];
audioPlayer.audioFilePath = recordFilePath;
[self.navigationController pushViewController:audioPlayer animated:YES];

CSS

<div>
  <img src='http://www.clker.com/cliparts/U/D/B/J/j/R/red-square-th.png'>
  <img src='http://www.clker.com/cliparts/G/f/E/Y/v/l/circle-th.png'>
</div>
<div id="lse" class="display">
  <div id="centertbl">
    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 1</b></td>
      </tr>
    </table>

    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 2</b></td>
      </tr>
    </table>
  </div>

  <input type="submit" class="button button1" name="submitButton" value="Button 1">
  <input type="submit" class="button button1" name="submitButton" value="Button 2">
  <input type="submit" class="button button1" name="submitButton" value="Button 3">
  <input type="submit" class="button button1" name="submitButton" value="Button 4">

</div>

Answer 1

你可以做的是在css中设置背景图像的div，然后在该div中使用<img />标记，如下所示：

HTML：

<div class='image-bg'>
  <img src='path/to/image' />
</div>

CSS：

.image-bg {
/*any other styles*/
background-image: url('relative/path/to/background/image');

Answer 2

将以下css添加到圈子中：

#circle{
 position:relative;
 z-index:1;
left:-100px;
}

编辑小提琴： https://jsfiddle.net/Debabrata89/qdd2z402/

Answer 3

这样做的一种方法是使用负边距将一个元素放在另一个元素上，在相对的一侧有相应的正边距，以便维持布局，如下所示：

*{box-sizing:border-box;border:0;font-family:sans-serif;margin:0;}
hr{background:#000;border-radius:2px;color:#000;height:2px;margin:20px auto;width:98%;}
div:nth-of-type(2n-1){
  background:#999;
  border-radius:5px;
  height:100px;
  width:100px;
}
div:nth-of-type(2n){
  background:#000;
  border-radius:50%;
  height:50px;
  width:50px;
}
div:last-of-type{
  margin:-75px 0 75px 25px;
}

<div></div>
<div></div>
<p>Text goes here</p>
<hr>
<div></div>
<div></div>
<p>Text goes here</p>

您还可以使用transform property翻译第二个div的位置。

*{box-sizing:border-box;border:0;font-family:sans-serif;margin:0;}
hr{background:#000;border-radius:2px;color:#000;height:2px;margin:20px auto;width:98%;}
div:nth-of-type(2n-1){
  background:#999;
  border-radius:5px;
  height:100px;
  width:100px;
}
div:nth-of-type(2n){
  background:#000;
  border-radius:50%;
  height:50px;
  width:50px;
}
div:last-of-type{
  transform:translate(25px,-75px);
}

<div></div>
<div></div>
<p>Text goes here</p>
<hr>
<div></div>
<div></div>
<p>Text goes here</p>

HTML CSS - 将一个图像放在另一个图像之上

3 个答案: