文章/答案/技术大牛

发布

问H2不定位
EN

Stack Overflow用户

提问于 2018-03-11 01:56:14

回答 1查看 523关注 0票数 0

我的H2没有定位到我想要的位置，我也不知道为什么，我已经尝试了定位:绝对和我的H2仍然没有出现，如果我添加填充-顶部:200 of，我可以看到我的H2，但在页面的最底部，但我仍然不能定位它，我想怎么做！我不知道该做什么，也不知道如何处理这个问题。

这就是我希望我的网站看起来的样子。

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;
}

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-03-11 02:29:01

您的H2没有出现在您希望它出现的地方，因为它没有任何定位集，它只是在与标头div相同的级别上。由于标头div是绝对定位的，所以它删除了元素的自然流，并强制h2到顶部。

删除该位置:从标头div中删除绝对位置，并将您的子标头封装到它自己的div中，如下所示：

.subheader {
  width: 100%;
}

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

在顶部创建的空白是因为您的.logo类中的边距顶，或者将其更改为填充顶，或者(最好)使用img标记，而不是设置背景图像。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49215884

复制

相似问题

问H2不定位
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问H2不定位EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问H2不定位
EN