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

时间:2016-02-19 05:01:13

标签: css

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

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

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

2 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

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