时间戳

首页 > 解决方案 > 相对于图像定位元素

html - 相对于图像定位元素

问题描述

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

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

}

标签： htmlcss

解决方案

我把相对位置放在 top__position

你需要穿上position: relative，.top不是.top__position。

编辑：

position: absolute绝对定位（即服从top、left、bottom、right属性）一个元素相对于它最近的定位（relative、absolute或fixed）祖先。

推荐阅读