CSS，位置绝对，加上额外的像素

Question

标题可能令人困惑，但让我试着解释一下。 我的网站上有一些对象，在样式部分都有id，有固定位置（位置：绝对，左边和顶部等）。

（我试图添加样式表代码，但这个页面没有让我发布，所以用你的想象力）

现在我想在所有对象下面添加一个小图标（旗帜），大约在上面位置下方20-25像素。我怎么能这样做？

Answer 1

换行 div中的对象，为包装div提供绝对位置，在div中添加您的图标。

试试这个，

<强> HTML

<div class='wrapper'>

        <img src='' class='image your-object'>
        <i class="icon"><!-- ICON HERE --></i>

</div>

<强> CSS

.wrapper{
   position: absolute;
   top: 5%;
   left: 5%;
   // your css here
}

.icon{
  margin-top: 20px;
  display: block;
}

Answer 2

浏览器从页面的正常流程中取出位置固定或绝对的元素。因此，您需要为图标指定一个id或类，并在样式表中手动设置样式（硬盘代码顶部/左侧位置，以像素为单位）。但是，如果您对javascript或jquery感到满意，那么可以计算这些元素的顶部/左侧位置，并动态地将顶部/左侧位置分配给您的图标......