Question

大家好我正在尝试制作一个小型的css3动画......问题是它没有超越我希望它过去的顶部...它在......我尝试应用z-index但它还没有起作用......想到动画的处理可能会有所不同吗？

如果有人知道如何将其移到最顶层，请告诉我

#header{
   background: url(/images/clouds.png) repeat-x center 48px;
   -webkit-animation-name:cloud-crawl-header;
   -webkit-animation-duration:  180s;
   -webkit-animation-timing-function:linear;
   -webkit-animation-iteration-count:infinite;
   -moz-animation-name:cloud-crawl-header;
   -moz-animation-duration:180s;
   -moz-animation-timing-function:linear;
   -moz-animation-iteration-count:infinite;
   z-index: 5;
}
@-webkit-keyframes cloud-crawl-header{
    from{ background-position: -100% 48px, center top}to{background-position: 100% 48px, center top}
    }

我只是希望它超越我正在使用的基本图像......

正在添加如此

<div class="logo">
   <a href="website.com/bla">
      <img src="images/logo.jpg" alt="logotop" title="title!" />
   </a>
</div>

.logo {
   margin: auto auto;
   text-align: center;
   z-index: -1;
}

Answer 1

元素的位置当前是静态的 - 您需要将其更改为相对，绝对或固定才能应用z-index。在你的情况下，我认为应用相对定位是最好的。推理：它不会改变元素的x，y（左，顶）位置。

如何在css3中制作动画在其他图像之上？

1 个答案: