如何叠加div内部元素？

Question

和平与祝福在你身上。

基本上我有：

<div class="container">
  <video class="viddeo"></video>
  <img class="img" src=""/>
</div>

只想在img元素上叠加video。 仅供参考:(不能并且不想使用position:absolute;）。

Jsfiddle：https://jsfiddle.net/7qhygsoj/

Answer 1

您可以设置图片position:relative，然后将top设置为与height video但negative value相同，因为我们需要移动image tag到top，如下所示，

.container{
  height:200px;
  width:300px;
  background:black;
}
.viddeo{
  width:100%;
  height:150px;
  background:grey;
}
.img{
  width:100%;
  height:150px;
  background:blue;
  position:relative;
  top:-155px;
}

<div class="container">
  <video class="viddeo"></video>
  <img class="img" src=""/>
</div>