我在页面上有几个div，其中一个是容器，另一个内容，我不想改变。我有另一个div #more，我想要在容器的顶部或面前。你能帮忙吗？
@charset "utf-8";
/* CSS Document */
body {
color:#FFF;
background-color:#000;
font-family: "Bradley Hand ITC";
margin:5%;
margin-top:2%;
}
#logo {
z-index:1;
}
#code {
margin-top:10%;
padding-top:2em;
margin-left:20%;
margin-right:20%;
text-align:center;
z-index:2;
}
a:link {color:#FFF;
text-decoration:none;
} /* unvisited link */
a:visited {color:#FFF;
text-decoration:none;
} /* visited link */
a:hover {color:#FFF;
text-shadow: 2px 2px 2px #999;
} /* mouse over link */
a:hover img {
-webkit-transform:scale(1.2);
-webkit-box-shadow:0px 0px 200px #ccc;
}
a:active {color:#FFF;
text-decoration:none;
} /*active link */
p { padding: 0px; }
#contact_form_holder {
margin-left:33%;
margin-top:5%;
font-variant: small-caps; /* making the small letter looks like capital but keeping the size of it to smaller, looks cool */
width:400px; /* setting a fixed width of the contact form holder will make things easier later (like aligning and such) */
font-weight: bolder;
border-radius: 5px;
box-shadow:#CCC 0px 0px 50px 10px;
padding:15px;
}
#contact_form_holder input, #contact_form_holder textarea {
border-radius: 5px;
border:#FFF solid;
box-shadow:#CCC 0px 0px 10px;
width:80%; /* make all the inputs and the textarea same size (100% of the div they are into) */
font-family: Verdana, Geneva, sans-serif ; /* we must set this, so it inherits the font-family */
background-color:#FFF;
padding:5px; /* and make a custom padding, you can set whatever you like */
}
#contact_form_holder textarea {
height:100px; /* i never liked small textareas, so make it 100px in height */
}
#send_message {
width:200px !important; /* the width of the submit button */
font-variant: small-caps;/* nicer font-variant (like explained before) */
border:1px solid black; /* remove the default border and put a normal black one */
cursor:pointer;
cursor:hand;
}
#cf_submit_p { text-align:rightright; } /* show the submit button aligned with the right side */
.error {
display: none; /* hide the errors */
/* add some styling */
padding:5px;
color: #D8000C;
font-size:14px;
background-color: #FFBABA;
width:250px;
text-align:center;
font-weight:bold;
}
.success {
display: none; /* hide the sucess div */
/* add some styling */
padding:5px;
color: #044406;
font-size:12px;
background-color: #B7FBB9;
}
#contact_logo {
padding-left:170px;
}
.error img { vertical-align:top; }
#instructions {
background:#F00;
}
#more {
z-index:100;
}
.fb-like {
float:left;
}
h1.main,p.demos {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.sp-container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.sp-content {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 5;
}
.sp-container h2 {
position: absolute;
top: 50%;
line-height: 100px;
height: 100px;
margin-top: -50px;
font-size: 100px;
width: 100%;
text-align: center;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-2 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.sp-container h2.frame-3 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-4 {
font-size: 200px;
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.sp-container h2.frame-5 {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {
-webkit-animation: blurFadeIn 3s ease-in 12s backwards;
-moz-animation: blurFadeIn 1s ease-in 12s backwards;
-ms-animation: blurFadeIn 3s ease-in 12s backwards;
animation: blurFadeIn 3s ease-in 12s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {
-webkit-animation-delay: 13s;
-moz-animation-delay: 13s;
-ms-animation-delay: 13s;
animation-delay: 13s;
}
.sp-container h2.frame-5 span:nth-child(3) {
-webkit-animation-delay: 14s;
-moz-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;
}
.sp-globe {
position: absolute;
width: 282px;
height: 273px;
left: 50%;
top: 50%;
margin: -137px 0 0 -141px;
background: transparent url(images/globe.png) no-repeat top left;
-webkit-animation: fadeInBack 3.6s linear 14s backwards;
-moz-animation: fadeInBack 3.6s linear 14s backwards;
-ms-animation: fadeInBack 3.6s linear 14s backwards;
animation: fadeInBack 3.6s linear 14s backwards;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
}
.sp-circle-link {
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
width: 100px;
height: 100px;
background: #666;
color: #FFF;
font-size: 20px;
font-weight:bolder;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: fadeInRotate 1s linear 16s backwards;
-moz-animation: fadeInRotate 1s linear 16s backwards;
-ms-animation: fadeInRotate 1s linear 16s backwards;
animation: fadeInRotate 1s linear 16s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
background: #333;
color: #FC0;
text-shadow:none;
}
#find {
padding-top:25%;
}
/**/
@-webkit-keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
@-webkit-keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes fadeInBack{
0%{
opacity: 0;
-webkit-transform: scale(0);
}
50%{
opacity: 0.4;
-webkit-transform: scale(2);
}
100%{
opacity: 0.2;
-webkit-transform: scale(5);
}
}
@-webkit-keyframes fadeInRotate{
0%{
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
@-moz-keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
@-moz-keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
@-moz-keyframes fadeInBack{
0%{
opacity: 0;
-moz-transform: scale(0);
}
50%{
opacity: 0.4;
-moz-transform: scale(2);
}
100%{
opacity: 0.2;
-moz-transform: scale(5);
}
}
@-moz-keyframes fadeInRotate{
0%{
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
/**/
@keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
@keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
@keyframes fadeInBack{
0%{
opacity: 0;
transform: scale(0);
}
50%{
opacity: 0.4;
transform: scale(2);
}
100%{
opacity: 0.2;
transform: scale(5);
}
}
@keyframes fadeInRotate{
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
答案 0 :(得分：3)
z-index仅在div元素的位置为relative，absolute或fixed
示例：
#logo {
position:relative;
z-index:1;
}
#code {
position:relative;
margin-top:10%;
padding-top:2em;
margin-left:20%;
margin-right:20%;
text-align:center;
z-index:2;
}
答案 1 :(得分：0)
为每个具有z-index的类和ID提供位置属性（位置：固定，位置：相对或位置：绝对），并且您的z-index将起作用。
如果你的div没有绝对定位或固定并且是正常的div放置，请使用position：relative。