Question

编辑：解决方案必须有l == True

我试图在图片上放置iframe。但是，无论我将边距权限设置为什么，它都会保持在同一位置。约为背景图像的1/5。

HTML

display: inline-block;

CSS

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

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

附加：您还必须从您的right: 380px;规则中删除 .Youtube - 它会覆盖left规则（因为它紧跟在它之下（“级联”） “））。

Answer 2

关于定位的全部内容。刚刚更改了边距和填充。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Fiddel

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

Answer 8

我知道它已经很晚了..

如何通过百分比保持响应的非常好的轻量级方法？调整大小在所有设备上完美运行。

要在照片div中添加width..add max-width:500px，或者您想要的任何尺寸，它都会完美调整大小。

＆＃13;

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

＆＃13;

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

＆＃13;

JsFiddle demo

无法将图像放在图像上

8 个答案: