html - 相对于图像定位元素

Question

我正在尝试相对于主图像定位图像 - 其余图像应位于主图像的左侧、右侧和顶部。

   <div class="top">
            <img class="top__position" src="https://place-hold.it/300x150" alt="">
            <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>  
            <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>  
            <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>  
   </div>

我在执行这项任务时遇到困难 - 我将相对位置放在 top__position 类上，将绝对位置放在 top__winner 和 top 上:

.top__winner:nth-of-type(1) {
    position: absolute;
    top: 10px;
    left: 20px;

}

Answer 1

I put the position relative on the top__position

您需要将 position: relative 放在 .top 上，而不是 .top__position。

编辑:

position: absolute 绝对位置(即遵守 top,left,bottom,right 属性)元素 relative 到它最近的定位(relative、absolute 或 fixed)祖先。