DIV 定位在页脚

Question

我尝试创建主页，但无法在页脚中放置 div。它总是显示在上面。谁能告诉我为什么会这样显示？

这是我的代码：

* {
  color: #000000;
  background-color: #FFFFFF;
  font-family: "Arial", "Sans serif", "Roboto", "ApexNew";
  padding: 0;
  margin: 0;
}

html {
  color: #000000;
  background-color: #FFFFFF;
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

body {
  color: #000000 !important;
  background-color: #FFFFFF !important;
  font-family: "Arial", "Sans serif", "Roboto", "ApexNew" !important;
  width: 100%;
  height: 100%;
}

#footer {
  width: 100%;
  height: 520px;
  color: #FFFFFF;
  background-color: #000000;
}


/* --Footer-- */

.ovfl {
  width: 200px;
  height: 200px;
}

<!doctype html>
<html lang="en-US">

<head>
  <!-- CSS -->
  <link rel="stylesheet" href="../assets/css/pages/index.css">
</head>

<body id="page-top" class="body">

  <header id="header" class="header">
    <nav id="navbar" class="navbar">

    </nav>
  </header>

  <main id="main" class="main">
    <div id="hero" class="hero">
    </div>
    <div id="newsletter" class="newsletter">
    </div>
  </main>

  <footer id="footer" class="footer">
    <div>
      <a href="#" id="ovfl-link" class="ovfl-link"><img src="../../../Pictures/JPG/gred.jpg" alt="Ovabis" id="ovfl" class="ovfl"></a>
    </div>
  </footer>

</body>

</html>

这就是它的样子。图片显示在页脚上方:-(

非常感谢

星际飞船

Answer 1

您的印象是图像不在页脚中，因为它的背景颜色不是黑色而是白色。但这是您在 css 和 * {} 中归因的行为。只需删除 * 的 background-color，您就会看到图像实际上位于您的页脚中：

*{
    color: #000000;
    
    /* This rule color your #ovfl image background*/
    /*background-color: #FFFFFF;*/
      
    font-family: "Arial", "Sans serif", "Roboto", "ApexNew";
    padding: 0;
    margin: 0;
}

html{
    color: #000000;
    background-color: #FFFFFF;
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

body{
    color: #000000 !important;
    background-color: #FFFFFF !important;
    font-family: "Arial", "Sans serif", "Roboto", "ApexNew" !important;
    width: 100%;
    height: 100%;
}

#footer{
    width: 100%;
    height: 520px;
    color: #FFFFFF;
    background-color: #000000;
}

/* --Footer-- */

.ovfl{
    width: 200px;
    height: 200px;
}

<!doctype html>
<html lang="en-US">
<head>
 <!-- CSS -->
</head>
<body id="page-top" class="body">

    <header id="header" class="header">
        <nav id="navbar" class="navbar">

        </nav>
    </header>

    <main id="main" class="main">
        <div id="hero" class="hero">
        </div>
        <div id="newsletter" class="newsletter">
        </div>
    </main>

    <footer id="footer" class="footer">
        <div>
          <a href="#" id="ovfl-link" class="ovfl-link">
            <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Ovabis" id="ovfl" class="ovfl">
          </a>
        </div>
    </footer>

</body>
</html>

DIV 定位在页脚

DIV positioning in footer

html

css

footer