Question

我的H2不是我想要的位置，我不知道为什么，我已经尝试过postion：绝对我的H2仍然没有出现，如果我添加padding-top：200px我能看到我的H2但在页面的最底部，但我仍然无法按照我的意愿定位它！我不知道该怎么做或如何处理这个问题。

This is how I would like my site to look

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Test</title>
</head>
<body>
  <!--Banner And Nav-->
  <div class="banner">
    <div class="logo">
      <ul class="nav">
        <li><a href="">Hello</a></li>
        <li><a href="">Hello</a></li>
        <li><a href="">Hello</a></li>
      </ul>
      <h1 class="mainh1">Test</h1>
    </div>
  </div>
  <!--End Of Banner And Nav-->
  <h2>Hello</h2>
</body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.banner {
  width: 100%;
  background-color: #8F3144;
  height: 300px;
  position: absolute;
  top: 0px;
}

.logo {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  margin-top: 5px;
}

.mainh1 {
  font-weight: bolder;
  text-align: center;
  padding-top: 50px;
  color: white;
}

.nav {
  list-style: none;
  text-align: right;
  margin: 0;
}

.nav>li {
  display: inline-block;
  font-size: 20px;
  margin-right: 20px;
  padding-top: 20px;
  font-weight: lighter;
}

.nav>li>a {
  text-decoration: none;
  color: white;
}

.nav>li>a:hover {
  opacity: .5;
}

h2{
  color: black;
  padding-top: 2000px;
}

Answer 1

你的H2没有出现在你想要的地方，因为它没有任何定位设置，它只是在你的标题div的同一级别的身体里。由于你的标题div是绝对定位的，它会消除元素的自然流动并迫使h2到达顶部。

从标题div中删除位置：绝对值，并将子标题包装在自己的div中，如：

.subheader {
  width: 100%;
}

.subheader h2 {
  text-align: center;
  color: black;
}

在顶部创建的空白区域是因为.logo类中的margin-top，要么将其更改为padding-top，要么（最好）使用img标记而不是设置background-image。

https://jsfiddle.net/50p420x8/5/

H2没有定位

1 个答案: