Icon over image + y axis positioning - html

Question

I am trying to get my 5 Font Awesome Icons over my background image with a fixed position. That fixed position should allow me to scroll past it whitout any problem. I know that there is a way but i am not finding it.
My HTML:
<!--Kaffe abschnitt -->
<!--5 Icons-->
<ul>
<li><i class="fa fa-cog fa-5x"></i></li>
<li><i class="fa fa-rebel fa-5x"></i></li>
<li><i class="fa fa-empire fa-5x"></i></li>
<li><i class="fa fa-twitch fa-5x"></i> </li>
<li><i class="fa fa-steam fa-5x"></i> </li>
</ul>
<!--Ende 5 Icons-->
<!--Hintergrund-->
<img src="img/bild2.png" class="container-full">
<!--Ende Kaffe abschnitt -->
Background CSS:
.container-full {
margin: 0 auto;
width: 100%;
z-index: -999;
}
Icon 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;
}
I am not asking for a premade full code. Just the name of the actions or some short code snipeds.

Answer 1

I am trying to get my 5 Font Awesome Icons over my background image with a fixed position.
You don't want to use 'position:fixed' if you want to scroll past them.
Instead, use position:absolute.
absolute will position elements according to the first parent that has anything but "position:static", i suggest setting "position:relative" on the parent you want your elements to position them self according to.
If you want your "icons" to be along the right hand side of a div, then it would have looked like this
#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}
Hope this gets you in the righth direction