Question

我试图将header标签显示在页面顶部但在主div标签上方（具有包装器类）。标头标记编码在html文件中的包装div上方，如下所示。我的标题标签大部分被背景图像覆盖，因为我将标题的背景设置为白色，但是由于背景是黑色，所以它隐藏了标题标签的一部分。请帮忙。谢谢。

<body>
    <header>
    <ul>
          <li><a>Home</a></li>
          <li><a>About</a></li>
          <li><a>Contact</a></li>
          <li><a>Links</a>
            <ul>
                <li>Link 1</li>
                <li>Link 2</li>
            </ul>
          </li>
        </ul>
    </header>
    <div class="wrapper">
      <div class="upload-console">
        <h2 class="upload-console-header">Upload</h2>

        <div class="upload-console-body">
          <h3>Select files</h3>
          <form action="upload.php" method="post" enctype="multipart/form-data">
            <input type="file" name="files[]" id="standard-upload-files" multiple>
            <input type="submit" value="Upload files" id="standard-upload">
          </form>

          <h3>Or drag and drop files below</h3>
          <div class="upload-console-drop" id="drop-zone">
            Just drag and drop files here
          </div>

          <div class="bar">
            <div class="bar-fill" id="bar-fill">
              <div class="bar-fill-text" id="bar-fill-text"></div>
            </div>
          </div>

          <div id="uploads-finished" class="hidden">
            <h3>Processed Files</h3>
            <!--<div class="upload-console-upload">
              <a href="">filename.zip</a>
              <span>Success</span>
            </div>-->
          </div>

        </div>

      </div>
    </div>
    <script src="global.js"></script>
  <body>

这里是页面外观的链接。 https://www.z1labs.com/fts.html

所有CSS都可以在这里看到： https://www.z1labs.com/global.css

Answer 1

您的页眉没有高度，因此无法看到。它包含未设置高度的无序列表，并且li元素具有float: left;，因此它们不包括在高度计算中。

要么考虑使用clearfix，要么尝试使用flex或其他布局来对抗浮动。

标头标签显示在部分隐藏的另一个元素之上

1 个答案: