html - 将 Logo 、菜单和标语放在图像幻灯片放映上

Question

我需要创建一个网站标题如下:

1. Logo 和菜单位于图像之上； 无论图像如何， Logo 和菜单都将相同。

2. 图片上会有标题和文字。 每张图片的标题和文字都不同。

3. Logo应该在左边，Menu在右边；

4. Logo + 菜单应仅占据 600 像素的最大宽度(包装)。 并且该包装应位于网站的中心。

所以我有以下 online example :

header {
  text-align: center;
}

div.wrapper {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
}

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

em {
  border: 1px solid red;
  position: absolute;
  z-index: 2000;
}

nav {
  position: absolute;
  z-index: 2000;
  right: 0;
}

.slides {
  position: absolute;
  width: 100%;
}

.slide img {
  position: relative;
  width: 100%;
}

.slide .text {
  position: absolute;
  text-align: center;
  top: 80px;
  width: 100%;
}

<header>

  <div class="wrapper">

    <em class="brand">
          <img src="http://via.placeholder.com/200x40"/>
        </em>

    <nav class="menu">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </div>

  <div class="slides">

    <div class="slide">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 1</h2>
        <p>Text of slide 1</p>
      </div>
    </div>

    <div class="slide" style="display:none;">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 2</h2>
        <p>Text of slide 2</p>
      </div>
    </div>

  </div>

</header>

<main>
  Main content
</main>

我现在遇到的问题是 Logo+Menu 没有居中，最大宽度为 600px。但老实说，我不确定我使用的定位方法是否正确。

Answer 1

问题是 nav，它是 position 作为 absolute，将 logo 和 menu 对齐在 的中心code>slide at max-width:600 你需要添加 position:relative 到 .wrapper 这是 导航。

position - absolute The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block.

div.wrapper {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
  position:relative;/*Add this*/
}

因此它得到 relative 到 .wrapper 并在幻灯片的中心对齐。

header {
  text-align: center;
}

div.wrapper {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
  position: relative;
}

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

em {
  border: 1px solid red;
  position: absolute;
  z-index: 2000;
}

nav {
  position: absolute;
  z-index: 2000;
  right: 0;
}

.slides {
  position: absolute;
  width: 100%;
}

.slide img {
  position: relative;
  width: 100%;
}

.slide .text {
  position: absolute;
  text-align: center;
  top: 80px;
  width: 100%;
}

<header>
  <div class="wrapper">

    <em class="brand">
          <img src="http://via.placeholder.com/200x40"/>
        </em>

    <nav class="menu">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </div>

  <div class="slides">

    <div class="slide">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 1</h2>
        <p>Text of slide 1</p>
      </div>
    </div>

    <div class="slide" style="display:none;">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 2</h2>
        <p>Text of slide 2</p>
      </div>
    </div>

  </div>

</header>