Html 将DIV相对于其相邻位置放置

我想定位div.product-video相对于其相邻右下角的位置（当屏幕宽度大于900px时）。设置边距顶部不是我想要的解决方案，因为div.product-overview高度是动态的。也许有一个负利润的把戏？希望有人能帮助我：-）

编辑：

---

当屏幕宽度超过900px时，我想将div.product-video粘贴到div.product.overview的右下角。否则，它应显示在div.product-overview下

编辑2：

我想将div.product-video放置在div.product-overview的右下角，与div.product-overview的高度无关

HTML

---

您的

@media

查询应如下所示：

@媒体屏幕和（最大宽度：900px）

• 将视频div放在概述中。概述如下所示

  位置：相对
  

• 视频div被指定为

  位置：绝对位置

  ，并根据需要正确定位为右、左和下

例子

div.product{
宽度：100%；
}
部门产品概述{
框大小：边框框；
最小宽度：500px；
宽度：50%；
背景颜色：橙色；
右侧填充：150px；
显示：内联块；
垂直对齐：底部对齐；
位置：相对位置；
}
产品视频部{
最小宽度：400px；
宽度：40%；
最大宽度：50%；
高度：250px；
位置：绝对位置；
背景颜色：浅蓝色；
右：-200px；
底部-50%；
}
@媒体屏幕和屏幕（最大宽度：900px）{
产品视频部{
左：0；
底部：-250px；
}
}

Lorem ipsum dolor sit amet
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯特特·克里塔·卡斯德·古伯格伦，无海
takimata sanctus est Lorem ipsum dolor sit amet


Lorem ipsum Door sit amet，consetetur Sadipsing Eliter
Lorem ipsum Door sit amet，consetetur Sadipsing Eliter
Lorem ipsum Door sit amet，consetetur Sadipsing Eliter
Lorem ipsum Door sit amet，consetetur Sadipsing Eliter
Lorem ipsum Door sit amet，consetetur Sadipsing Eliter
Lorem ipsum Door sit amet，consetetur Sadipsing Eliter

录像带

以什么方式相对？不清楚您要的是什么。能否用图像向我们显示预期的输出？当屏幕宽度超过900px时，我希望div.product-video粘贴在div.product.overview的右下角。否则它应该显示在div.product-overview下面我真的很感激你的回答，尽管这不是我需要的。我添加了一张图片来更好地描述我的问题。正是我所需要的，非常感谢@Mistermansanno！更新了我的答案：）

<div class="product">
    <div class="product-overview">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <ul class="product-benefits">
            <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
            <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
            <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
            <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
            <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
            <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
        </ul>
    </div>
    <div class="product-video">
        <p>VIDEO</p>
    </div>
</div>

div.product
{
    width: 100%;
}

div.product-overview
{
    float: left;
    box-sizing: border-box;
    min-width: 500px;
    width: 50%;
    background-color: orangered;
    padding-right: 150px;
}

div.product-video
{
    float: left;
    min-width: 400px;
    width: 40%;
    max-width: 50%;
    height: 250px;
    background-color: lightblue;
}

@media (min-width: 900px)
{
    div.product-video
    {
        margin-left: -100px;
    }
}