无法将图片叠加在另一张图片上

Question

编辑：这些解决方案必须具有display: inline-block;

我试图将一个iframe放在一张图片上面。但是，无论我将margin-right设置为什么，它都停留在同一个位置。约为背景图片的五分之一。

HTML

<div class="backgroundimage">
  <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.backgroundimage {
  display: inline-block;
  position: relative;
  top: 70px;
  bottom: 46px;
}
.Youtube {
  position: absolute;
  left: 280px;
  bottom: 46px;
  right: 380px;
}

以下是我的问题截图：

（注：此文涉及it技术，翻译为“问题”）

- Thomas Hutton

---

这个？https://jsfiddle.net/yb43y4nd/ - pol

在容器上设置“top”和“left”的原因是什么？ - darrylyeo

Answer 1

只需在 .Youtube 规则中将 left 更改为较小的值（即父元素左侧的 左侧）。从大约10像素开始，不断尝试找到理想位置。

添加：您还必须删除您的.Youtube规则中的right: 380px; - 它覆盖了left规则（因为它位于其下方（“级联”））。

- Johannes

---

请注意我的回答中增加的部分 - Johannes

谢谢！你找到了答案！ - Thomas Hutton

Answer 2

我知道现在有点晚了...

不过，你觉得用百分比的方式来保持响应性怎么样？这种轻量级的方法在所有设备上都可以完美地调整大小。

如果要添加宽度，请在照片 div 中添加 max-width:500px 或者你想要的任何尺寸，它会完美地自适应。

#container {
  display: inline-block;
  width: 100%;
  height: auto;
}

#photo {
  position: absolute;
  width: 100%;
}

#movie {
position: absolute;
    width: 100%;
    max-width: 90%;
    height: 75%;
    top: 6.75%;
    left: 4.25%;
    border: none;
}

<div id="container">
  <div id="photo">
    <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" width="100%" height="auto">
    <div id="movie">
       <iframe class="Youtube" width="100%" height="100%" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen>    </iframe>
    </div>
  </div>
</div>

JsFiddle演示

- norcal johnny

Answer 3

一切都关乎定位。只需更改边距和填充即可。

.backgroundimage {
  position: relative;
}
.Youtube {
  position: absolute;
  top: 11px;
  left: 11px;
}

<div class="backgroundimage">
  <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
</div>

- kind user

---

这样做是可行的；但是我需要我的内联块。否则，我的 div 将变成父 div（页面本身）的大小。我需要更小的东西。 - Thomas Hutton

你说的“smaller”是指什么？你想让iframe变小吗？ - kind user

不，当显示设置为块时，backgroundimage div 的大小与 entry-content div 相同。我希望它的大小与电视图像一样大。 - Thomas Hutton

不，这个 div 横跨整个页面宽度（在此代码片段的情况下）。 - Thomas Hutton

让我们在聊天中继续这个讨论。 - Thomas Hutton

Answer 4

<style type="text/css"> 
.container { position:relative; }
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 70px; left: 100px; z-index: 3; } 
</style>

---

<div class="container">
<img class="imgA1" src="image1.png">
<img class="imgB1" src="image2.png">
</div>

如果你想的话，可以添加更多的图片。

- Razia sultana

Answer 5

这是我能做到的最相似的代码，同时在 iframe 上显示图像：

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

.backgroundimage {
  display: inline-block;
  position: relative;
  top: 70px;
  bottom: 46px;
}
.Youtube {
  position: absolute;
  left: 280px;
}

<div class="backgroundimage">
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
  <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
</div>

我所做的主要事情是对图像添加了position:absolute。

- Chris Lear

Answer 6

当元素的宽度已知时，您永远不需要同时设置left和right。其中之一就足够了。

.backgroundimage {
    display: inline-block;
    position: relative;
    top: 70px;
    bottom: 46px;
}
.Youtube {
    position: absolute; 
    top: 22px;
    left: 20px;
}

- darrylyeo

Answer 7

调整了视频的绝对位置。

http://codepen.io/anon/pen/BLOdov

.backgroundimage {
  display: inline-block;
  position: relative;
  top: 70px;
  bottom: 46px;
}
.Youtube {
  position: absolute;
  left: 12px;
  bottom: 50px;
  right: 380px;
}

- Steven Ventimiglia

Answer 8

HTML

<div class="backgroundimage">
 <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
  </div>

CSS

  .backgroundimage {
      display: inline-block;
      position: relative;
      top: 70px;
      bottom: 46px;
    }
    .Youtube {
      position: absolute;
      left: 10px;
      bottom: 52px;
    }

Fiddel

https://jsfiddle.net/dhavalpatel/a2bhnw92/

- Dhaval Ajani