有没有一种方法可以使文本显示在绝对元素的下方，而无需在元素的顶部添加边距？

时间：2019-11-26 19:43:58

标签： 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>

1 个答案:

答案 0 :(得分：0)

我添加了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>

相关问题
最新问题