在页面背景中放置元素

Question

我正在尝试创建一个页面，其背景是动画圆的行和列。 该页面的中间还会有一个标题。 当我使用div首先加载一列圈子时，标题将被下推至底部。 我知道z-index将有助于将圈子带到后面并保持标题在前。 但是，我仍然无法解决问题。 我对div和span的用法感到困惑。 我也是CSS的新手。 我希望得到一些指导。

这是我的一些代码：

<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>  

圆圈和标题的一些CSS：

.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索引仅适用于定位的元素。 换句话说，position属性必须具有非静态值，否则z-index将被忽略。