图像上方的图标 + y 轴定位答案

【问题标题】：Icon over image + y axis positioning图像上方的图标 + y 轴定位
【发布时间】：2015-03-30 08:08:04
【问题描述】：

我正在尝试将我的 5 个 Font Awesome 图标以固定位置覆盖在我的背景图像上。该固定位置应该允许我滚动过去而不会出现任何问题。我知道有办法，但我没有找到。

我的 HTML：

    <!--Kaffe abschnitt -->
    <!--5 Icons-->
<ul>
    <li><a href="#"><i class="fa fa-cog fa-5x"></i></a></li>
    <li><a href="#"><i class="fa fa-rebel fa-5x"></i></a></li>
    <li><a href="#"><i class="fa fa-empire fa-5x"></i></a></li>
    <li><a href="#"><i class="fa fa-twitch fa-5x"></i> </a></li>
    <li><a href="#"><i class="fa fa-steam fa-5x"></i> </a></li>
</ul>
    <!--Ende 5 Icons-->
    <!--Hintergrund-->
    <img src="img/bild2.png" class="container-full">
    <!--Ende Kaffe abschnitt -->

背景 CSS：

.container-full {
  margin: 0 auto;
  width: 100%;
  z-index: -999;
}

图标 CSS：

 ul li {
        list-style-type: none;
        float: left;
    } 
ul li a span {
    background: transparent;
    color: #205D7A;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 2px solid;

    text-align: center;
    transition: all 0.2s ease-in-out;
    z-index: 998;
}
ul li a span:hover {
    opacity: .8;
}

我不是要一个预制的完整代码。只是动作的名称或一些短代码。

【问题讨论】：

尝试使用<span class="fa fa-twitch fa-5x"> .. ?
@AbhishekGhosh 跨越所有这些，还是图标自己获得了跨越？
每个图标都有自己的跨度

标签： html css twitter-bootstrap icons font-awesome

【解决方案1】：

我正在尝试将我的 5 个 Font Awesome 图标以固定位置覆盖在我的背景图像上。

如果你想滚动过去，你不想使用 'position:fixed'。相反，请使用 position:absolute。

absolute 将根据除“position:static”之外的第一个父级来定位元素，我建议在您希望元素根据自身定位的父级上设置“position:relative”。

如果您希望“图标”位于 div 的右侧，那么它应该是这样的

#myDiv{position:relative;} //the container

.myIcons{position:absolute; right:0} //a handy class on all your icons spans/i

.icon1{top:0px} //these are just unique classes per icon
.icon2{top:20px}
.icon3{top:40px}

希望这能让你朝着正确的方向前进

【讨论】：

这正是我需要的帮助。 ty @NachoDawg