图像上的图标 + y 轴定位

Question

我正在尝试将我的 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;
}

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

Answer 1

I am trying to get my 5 Font Awesome Icons over my background image with a fixed position.

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

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

如果您希望 "icons" 位于 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}

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

图像上的图标 + y 轴定位

Icon over image + y axis positioning

html

css

twitter-bootstrap

icons

font-awesome