Question

我一直在尝试创建一个位于旋转横幅上方的导航和徽标div。我在使用CSS时遇到了麻烦。

例如：

<div class="logo-div">

<div class="logo">
<img src="image/logo.jpg">
</div>

<div class="nav">
<ul><li>nav-button</li></ul>
</div>

</div><!--logo div -->

<div class="rotator">
</div>

我尝试使用负上边距将旋转器拉入导航徽标div，但这只会导致导航而不是徽标。我也试过切换导航徽标和旋转器的顺序，但这也不起作用。

猜测我需要使用z-index以及相对和绝对定位，但我无法让它正常工作。

非常感谢。

以下是具有此功能的网站示例：website

Answer 1

好的，如果您的示例链接是您想要的正确指示......关键问题是您将使用什么方法来旋转横幅？ javascript当然（如果你想要跨浏览器兼容性）但是...什么方法？您提供的链接中的人使用的是<ul>元素，其中包含多个<li>个元素，每个元素都有不同背景之一......

使用transitions（高级css3效果），absolute positioning和left，他基本上会水平滚动它们，更改left

的值

无论如何，你需要像：

.wrapper {display:block; position:relative;}
.logo-div {position:absolute; top:0; left:0; z-index:9999;}
.logo {}
.nav {}
.rotator {position:absolute; top:0; left:0; z-index:1;}

和html应该是这样的：

<div class="wrapper">

  <div class="rotator">
      insert your magic slides of different content or backgrounds here, be in in ul+li format or just divs or whichever method you prefer
  </div><!-- .rotator -->

  <div class="logo-div">

    <div class="logo">
      <img src="image/logo.jpg">
    </div>

    <div class="nav">
     <ul>
       <li>nav-button</li>
     </ul>
    </div><!-- .nav -->

  </div><!--logo div -->

</div><!-- .wrapper -->

这里真正的问题是，您将使用什么方法来循环内容？你可以复制他的方法，或者只是改变背景位置，如果你想改变的只是背景而不是任何内容。

.wrapper或父元素需要position：relative; 该包装器的内容，在本例中为.logo-div和.rotator，需要position：relative .rotator div位于导航栏和徽标后面，所有需要z-index：1;加上顶部：0;并离开：0;举个例子位于.rotator div之上的.logo-div需要z-index：2或9999;加上顶部：0;并离开：0;作为一个例子

所以现在一切都停留在应有的位置，而.rotator的内容可以移动而不会弄乱页面的其余部分。

选择循环/移动背景内容/图像的方法，我会给你一个更具体的答案。

希望这有帮助

徽标和导航在旋转横幅

1 个答案: