javascript - 在页面背景中放置元素

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-index 仅适用于定位元素。换句话说，position 属性必须有一个不同于 static 的值，否则 z-index 将被忽略。