在页面背景中放置元素

Question

I'm trying to create a page where its background are rows and columns of animated circles. The page will also have a title in the middle. When I use div to load a column of circles first, the title gets pushed down to the bottom. I know z-index will help bring the circles to the back and keep the title in front. But still, I'm not able to solve the issue. I'm confused about the usage of div and span to do this. I'm also new to CSS. I'd appreciate some guidance.

Here is some of my code:

<div class="container">
 <div class="circle"></div>
 <div class="circle"></div>
 <div class="circle"></div>
 <div class="circle"></div>
 <center>
 <h1 style=color:black class="hvr-float">Hello</h1>
 <button class="btn btn-default hvr-wobble-horizontal" data-toggle="tooltip" data-placement="bottom" title="Facebook">
 <i class="fa fa-facebook-square fa-4x" aria-hidden="true"> </i>
 </button>

<button class="btn btn-default hvr-wobble-horizontal" data-toggle="tooltip" data-placement="bottom" title="Github">
 <i class="fa fa-github fa-4x" aria-hidden="true"> </i>
 </button>

 <button class="btn btn-default hvr-wobble-horizontal" data-toggle="tooltip" data-placement="bottom" title="LinkedIn">
 <i class="fa fa-linkedin fa-4x" aria-hidden="true"> </i>
 </button>

 <button class="btn btn-default hvr-wobble-horizontal" data-toggle="tooltip" data-placement="bottom" title="Skype">
 <i class="fa fa-skype fa-4x" aria-hidden="true"> </i>
 </button>
 <button class="btn btn-default hvr-wobble-horizontal" data-toggle="tooltip" data-placement="bottom" title="Codepen">
 <i class="fa fa-codepen fa-4x" aria-hidden="true"> </i>
 </button>
 <button class="btn btn-default  hvr-wobble-horizontal " data-toggle="tooltip" data-placement="bottom" title="Resume">
 <i class="fa fa-file fa-4x" aria-hidden="true"> </i>
 </button>
 <button class="btn btn-default hvr-wobble-horizontal" data-toggle="tooltip" data-placement="bottom" title="Email">
 <i class="fa fa-envelope-o fa-4x" aria-hidden="true"> </i>
 </button>
 </center>

    </div>  

Some CSS for the circle and headings:

.circle {
    position:relative;
    left:20px;
    bottom:20px;
    top:20px;
    z-index:-100;

    border-radius: 35px;
    border-style: solid;
    border-width: 35px;
    border-bottom-color:  #FFE097 ;
    border-left-color: #9BE3F4;
    border-right-color:  #9BF4D4 ;
    border-top-color: #FF97E3;
    height: 0px;
    width: 0px;
    transform:rotate(45deg);




    }
h1{
z-index:100;
font: 400 130px/0.8 'Great Vibes', Helvetica, sans-serif;
color: #fff;
text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 
position:absolute;
left: 420px;
margin-top: 17%;

}

Answer 1

Z-index only works on positioned elements. In other words, the position property must have a value other than static or z-index will be ignored.