在图像幻灯片放映上放置徽标、菜单和标语答案

【问题标题】：Place Logo, Menu and Slogan over Image Slide Show在图像幻灯片放映上放置徽标、菜单和标语
【发布时间】：2017-09-01 18:39:35
【问题描述】：

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

图像顶部的徽标和菜单；无论图像是什么，标志和菜单都是一样的。
图像上会有标题和文字。每张图片的标题和文字都不同。
Logo 应该在左边，Menu 应该在右边；
徽标 + 菜单应仅占用 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>

我目前遇到的问题是徽标+菜单未居中，最大宽度为 600 像素。但老实说，我不确定我使用的定位方法是否正确。

【问题讨论】：

标签： html css

【解决方案1】：

问题是nav，即position 和absolute，要在slide 的中心对齐logo and menu max-width:600，您需要将position:relative 添加到.wrapper 的父元素nav.

position - absolute 元素从正常的文档流中移除；不为页面布局中的元素创建空间。相反，它是相对于其最近的定位祖先（如果有）定位；否则，它将相对于初始包含块放置。

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>

【讨论】：

@Miguel Moura 需要更改在中心位置对齐徽标+菜单。
你的代码有一些问题，因为主标签中的内容，在标题之后，就消失了：plnkr.co/edit/QLwjGduDLag9crAOTvtP?p=preview
是的，你是对的。我没有意识到这一点。有办法解决吗？
@MiguelMoura 你可以检查这个 jsFiddle jsfiddle.net/ze2c2hfz，因为每个子元素都被定位为绝对的，即使没有固定的高度或宽度被分配给作为父块的标题，因此它会产生一个问题并隐藏滑块后存在的所有元素。
我无法定义页眉的高度。这会破坏我的设计，因为它需要响应。还有其他选择吗？

【解决方案2】：

这是您的要求，有一些结构和css 更改：

header {
  text-align: center;
  position: relative;
}

div.wrapper {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
  position: absolute;
  top:0;
  left:0;
  right:0;
  z-index: 9;
}

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: relative;
  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 content start here -->
<main>
  Main content
</main>

【讨论】：

你的代码有一些问题，因为主标签中的内容，在标题之后，就消失了：plnkr.co/edit/QLwjGduDLag9crAOTvtP?p=preview
@MiguelMoura，我找不到任何消失的内容。你能解决这些内容吗？
您想在header 之后添加<main>Main content</main> 吗？因为我检查了你的问题，但它也不存在。
我的在线示例中有代码，但忘记将其复制到我的问题中。我刚刚更新了问题的 HTML。所以是的，我需要在标题之后有更多内容的主标签。
在我的回答中添加了main 部分。

【解决方案3】：

我更改了应该放置position: absolute 和z-index 的位置。还添加了一个可以居中显示的柔性显示器。希望这会有所帮助！

/* Styles go here */

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

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

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

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

.slides {
  width: 100%;
}

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

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

.wrapper {
  display:flex;
  width: 600px;
  justify-content:center;
  position:absolute;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
  
    <header>
      
      <div class="lobby">
        <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"/>
            <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"/>
            <h2>Slide 2</h2>
            <p>Text of slide 2</p>
          </div>        
        
        </div>      
        
      </div>
      
    </header>

    <main>
      Main content
    </main>
  
  </body>

</html>

【讨论】：