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属性必须具有静态值以外的值，否则将忽略z-index。

将元素放在页面背景中

1 个答案: