html - 有没有办法让文本出现在绝对元素下方而不向元素添加 margin-top ？

标签 html css

我正在制作一个多列表下拉导航，我希望在其下方显示一些文本或照片。因为我的导航栏有一个绝对位置，文本出现在导航栏后面而不是下面。有没有一种方法可以让我的文本显示在下方，而无需在导航下方的元素或容器上使用边距或填充？

目前我一直在使用的“修复”是添加 margin-top: 4rem 样式或与我的 h1 相同的填充样式，以使其显示在导航下方而不是后面

由于我想在内容不同的多个页面上使用这个导航栏，所以我希望不需要不断地找到导航下方的元素并向其添加填充/边距。有没有其他方法或者我只需要使用当前的“解决方案”？

这是我的 codepen

下面的片段:

html,
body {
  margin: 0;
  padding: 0;
}

header {
  height: 100px;
  background: black;
}

nav {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 100%;
  background: #363636;
}
nav .nav-container {
  width: 80%;
  margin: auto;
}
nav .third-level-menu {
  list-style-type: none;
  position: absolute;
  top: 0;
  right: -15rem;
  width: 15rem;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
nav .third-level-menu > li {
  height: auto;
  background: #414141;
}
nav .second-level-menu {
  list-style-type: none;
  position: absolute;
  top: 4rem;
  left: 0;
  width: 15rem;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  font-size: 0.5rem;
  letter-spacing: 0.1ch;
  text-indent: 1rem;
  font-size: 1rem;
}
nav .second-level-menu > li {
  list-style-type: none;
  position: relative;
  height: 4rem;
  background: #474747;
  text-align: left;
}
nav .top-level-menu {
  list-style-type: none;
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;
  line-height: normal;
  text-align: center;
  height: auto;
}
nav .top-level-menu > li {
  position: relative;
  float: left;
  height: 4rem;
  width: 9.4rem;
  background: #363636;
  font-size: 1.2rem;
}
nav .top-level-menu a {
  color: #e8e8e8;
  text-decoration: none;
  padding: 0 1rem;
  display: block;
  line-height: 4rem;
  text-transform: uppercase;
}

@media screen and (min-width: 1023px) {
  .top-level-menu li:hover > ul {
    display: inline;
  }
}
<header>
  
</header>
<nav class="nav">
  <div class="nav-container">
    <ul class="top-level-menu">
      <li><a href="index.html">Home</a></li>
      <li>
        <a href="#">More</a>
        <ul class="second-level-menu">
          <li>
            <a>Wyoming</a>
            <ul class="third-level-menu">
              <li><a href="#">Wyoming li</a></li>
              <li><a href="#">Wyoming li</a></li>
              <li><a href="#">Wyoming li</a></li>
              <li><a href="#">Wyoming li</a></li>
            </ul>
          </li>
          <li>
            <a>Washington</a>
            <ul class="third-level-menu">
              <li><a href="#">Washington</a></li>
              <li><a href="#">Washington</a></li>
            </ul>
          </li>
          <li>
            <a>Idaho</a>
            <ul class="third-level-menu">
              <li><a href="#">Idaho Falls</a></li>
              <li><a href="#">Idaho Falls</a></li>
              <li><a href="#">Idaho Falls</a></li>
              <li><a href="#">Idaho Falls</a></li>
              <li><a href="#">Idaho Falls</a></li>
              <li><a href="#">Idaho Falls</a></li>
            </ul>
          </li>
          <li>
            <a>Minnesota</a>
            <ul class="third-level-menu">
              <li><a href="#">Duluth</a></li>
            </ul>
          </li>
          <li>
            <a>Montana</a>
            <ul class="third-level-menu">
              <li><a href="#">Montana</a></li>
              <li><a href="#">Montana</a></li>
              <li><a href="#">Montana</a></li>
              <li><a href="#">Montana</a></li>
            </ul>
          </li>
          <li>
            <a>South Dakota</a>
            <ul class="third-level-menu">
              <li><a href="#">SD</a></li>
              <li><a href="#">SD</a></li>
            </ul>
          </li>
          <li>
            <a>North Dakota</a>
            <ul class="third-level-menu">
              <li><a href="#">Idaho</a></li>
              <li><a href="#">Idaho</a></li>
              <li><a href="#">Idaho</a></li>
              <li><a href="#">Idaho</a></li>
              <li><a href="#">Idaho</a></li>
            </ul>
          </li>
        </ul>
      </li>

      <li>
        <a href="sales.html">Sale</a>
        <ul class="second-level-menu">
          <li><a href="#">Ogden, UT</a></li>
          <li><a href="#">Ogden, UT</a></li>
          <li><a href="#">Ogden, UT</a></li>
          <li><a href="#">Ogden, UT</a></li>
        </ul>
      </li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </div>
</nav>
<br>
<h1>HELLO IS ANYONE THERE?</h1>

最佳答案

我添加了一个 div，其 id 为“navspace”。这将需要添加到导航下方的每个页面。

然后我添加了一行 javascript，使这个 div 与 nav 的高度相同。因此，所有其他元素将出现在 nav 下方。

document.getElementById("navspace").style.height = document.getElementsByTagName('nav')[0].offsetHeight + "px";
html,
body {
  margin: 0;
  padding: 0;
}

header {
  height: 100px;
  background: black;
}

nav {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 100%;
  background: #363636;
}

nav .nav-container {
  width: 80%;
  margin: auto;
}

nav .third-level-menu {
  list-style-type: none;
  position: absolute;
  top: 0;
  right: -15rem;
  width: 15rem;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

nav .third-level-menu>li {
  height: auto;
  background: #414141;
}

nav .second-level-menu {
  list-style-type: none;
  position: absolute;
  top: 4rem;
  left: 0;
  width: 15rem;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  font-size: 0.5rem;
  letter-spacing: 0.1ch;
  text-indent: 1rem;
  font-size: 1rem;
}

nav .second-level-menu>li {
  list-style-type: none;
  position: relative;
  height: 4rem;
  background: #474747;
  text-align: left;
}

nav .top-level-menu {
  list-style-type: none;
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;
  line-height: normal;
  text-align: center;
  height: auto;
}

nav .top-level-menu>li {
  position: relative;
  float: left;
  height: 4rem;
  width: 9.4rem;
  background: #363636;
  font-size: 1.2rem;
}

nav .top-level-menu a {
  color: #e8e8e8;
  text-decoration: none;
  padding: 0 1rem;
  display: block;
  line-height: 4rem;
  text-transform: uppercase;
}

@media screen and (min-width: 1023px) {
  .top-level-menu li:hover>ul {
    display: inline;
  }
}
<header>

</header>
<nav class="nav">
  <div class="nav-container">
    <ul class="top-level-menu">
      <li><a href="index.html">Home</a></li>
      <li>
        <a href="#">More</a>
        <ul class="second-level-menu">
          <li>
            <a>Wyoming</a>
            <ul class="third-level-menu">
              <li><a href="#">Wyoming li</a></li>
              <li><a href="#">Wyoming li</a></li>
              <li><a href="#">Wyoming li</a></li>
              <li><a href="#">Wyoming li</a></li>
            </ul>
          </li>
          <li>
            <a>Washington</a>
            <ul class="third-level-menu">
              <li><a href="#">Washington</a></li>
              <li><a href="#">Washington</a></li>
            </ul>
          </li>
          <li>
            <a>Idaho</a>
            <ul class="third-level-menu">
              <li><a href="#">Idaho Falls</a></li>
              <li><a href="#">Idaho Falls</a></li>
              <li><a href="#">Idaho Falls</a></li>
              <li><a href="#">Idaho Falls</a></li>
              <li><a href="#">Idaho Falls</a></li>
              <li><a href="#">Idaho Falls</a></li>
            </ul>
          </li>
          <li>
            <a>Minnesota</a>
            <ul class="third-level-menu">
              <li><a href="#">Duluth</a></li>
            </ul>
          </li>
          <li>
            <a>Montana</a>
            <ul class="third-level-menu">
              <li><a href="#">Montana</a></li>
              <li><a href="#">Montana</a></li>
              <li><a href="#">Montana</a></li>
              <li><a href="#">Montana</a></li>
            </ul>
          </li>
          <li>
            <a>South Dakota</a>
            <ul class="third-level-menu">
              <li><a href="#">SD</a></li>
              <li><a href="#">SD</a></li>
            </ul>
          </li>
          <li>
            <a>North Dakota</a>
            <ul class="third-level-menu">
              <li><a href="#">Idaho</a></li>
              <li><a href="#">Idaho</a></li>
              <li><a href="#">Idaho</a></li>
              <li><a href="#">Idaho</a></li>
              <li><a href="#">Idaho</a></li>
            </ul>
          </li>
        </ul>
      </li>

      <li>
        <a href="sales.html">Sale</a>
        <ul class="second-level-menu">
          <li><a href="#">Ogden, UT</a></li>
          <li><a href="#">Ogden, UT</a></li>
          <li><a href="#">Ogden, UT</a></li>
          <li><a href="#">Ogden, UT</a></li>
        </ul>
      </li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </div>
</nav>
<div id="navspace"></div>
<br>
<h1>HELLO IS ANYONE THERE?</h1>

关于html - 有没有办法让文本出现在绝对元素下方而不向元素添加 margin-top ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59058344/

上一篇：CSS 背景动画有效，但有一个问题

下一篇：html - z-index 折叠菜单 bootstrap 4 CSS 无法正常工作

相关文章：

css - 使用文本作为 DIV 的背景

javascript - 图像被推到其包裹的 div 之外

css - 一起使用 Webpack 和 Bootstrap 的错误

javascript - React-Native 中的右下对齐(使用 Flex-box)不起作用

html - 当 png 大小不同时，如何最好地调整图像大小？

css - 有没有办法获取网站中使用的所有媒体查询？

python - 在 Scrapy 中使用 XPath 提取 HTML 结果失败，因为内容是动态加载的

html - Firefox 中的 SVG 破解(渲染不清晰)

html - JqG​​rid 固定高度不按预期工作

php - 使用 PHP 的 DOMDocument 时避免百分比编码 href 属性

©2024 IT工具网  联系我们