不能把图像放在图像上

Question

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

我正在尝试将 iframe 放在图像上。但是，无论我将 margin-right 设置为什么，它都保持在同一个位置。大约是背景图片的 1/5。

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

还有我的问题的图片：

Answer 1

只需将left 更改为.Youtube 规则中的较小值（即左侧父元素左侧）。从 10px 左右开始，通过尝试找到理想的位置。

补充：您还必须从.Youtube 规则中删除right: 380px; - 它会覆盖left 规则（因为它在其下方（“级联”））。

Answer 2

一切都与定位有关。只是更改了边距和填充。

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

Answer 3

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

如果您愿意，可以添加更多图片。

Answer 4

这与我对您的代码所做的相似，同时在 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添加到图像中

Answer 5

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

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

Answer 6

调整了视频的绝对位置。

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

Answer 7

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

菲德尔

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

Answer 8

我知道已经晚了..

用一个非常好的轻量级方法来保持它的百分比响应怎么样？调整大小可以在所有设备上完美运行。

要在照片 div 中添加宽度..add 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 demo