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

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

转载作者：行者123 更新时间：2023-11-27 22:59:48

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

目前我一直在使用的“修复”是添加 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/

文章推荐： html - z-index 折叠菜单 bootstrap 4 CSS 无法正常工作

文章推荐： html - 如何用 bool 玛居中一个部分

文章推荐： javascript - 在垂直位置上向左填充奇怪的行为

html - 位置相对/绝对
我想要做的是在每个框的蓝色标题之后获取红色文本。看来我必须添加另一个 div？我已经添加并修改了 .card-indus img 的位置，但结果永远不是我想要的。你知道为什么即使我将 positi
css - 绝对/相对位置尝试强制滚动条到页面顶部
所以我一直在努力掌握绝对和相对定位的诀窍。关于这个主题有很多教程和问题，我已尽力理解它们。除了这一点，我大部分时间都很好。我正在创建一个页面，其中有较小的缩略图图像，用户可以选择单击并展开图像。为此，
html - 绝对/相对定位问题
下面是我正在处理的代码。如您所见，有一个“#parent”div 和一个“#child”div。 '#child' div 有一个未定义的高度，这是因为有时，'#child' 的高度小于或长于它的父级
html - 将标题按钮居中而不使其成为静态/绝对
我目前正在创建一个看起来有点像这样的固定 header 。 https://gyazo.com/e0bab8ba195e33110b19123c7fc3c568 Logo 始终位于左侧，小按钮始终位于
css - “绝对”位置元素在放置在父级范围之外时不显示？
我怎样才能得到一个绝对定位的子 div，当它放在父 div 的范围之外时不显示？ https://jsfiddle.net/knp9ebys/9/ .papa { background:red;
html - CSS定位相对于固定/绝对
如果我对 CSS 显得相当“菜鸟”，我深表歉意。我一直在尝试设置以下... #0 { width: 100%; height: y; border: 1px solid black; } #
css - 绝对/相对定位布局溢出
很长一段时间以来，我一直在摆弄一个特定的布局问题，但我显然采用了错误的方式。以下是分解为基本组成部分的方法: SOME HEADER
c# - 绝对 URL 不适用于虚拟目录？
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。例如: http://www.site.com/app_1/default.aspx ===> http:
c# - 绝对 URL 不适用于虚拟目录？
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。例如: http://www.site.com/app_1/default.aspx ===> http:
haskell - protected 绝对/相对文件路径类型
我想知道是否有一个库在某处提供受新类型保护的 FilePath 类型。我找到了我想要的http://hackage.haskell.org/package/darcs-2.8.4/docs/src/D
Java 数据库 - 绝对 URL
如果我尝试使用以下方式连接到我的嵌入式数据库: private static String url = "jdbc:sqlite:~/hr4413/pkg/sqlite/Models_R_US.db"
python - Django 绝对 url
所以我是 django 的新手，我一直在研究 PHP CodeIgniter，其中将绝对 URL 放入 href 我通过调用 URL 帮助程序使用了一个名为 base_url 的函数它给出的输出类
jquery - Div 水平居中 NO 绝对
我有一个小问题。我在其他 div 中有一些图像元素的容器 div。像这样的东西: 我需要将容器垂直居中，但我不能使用顶部:-healfHeight； mar
javascript - IE8 绝对/相对定位元素不显示
我有一个带有 inline-block css 位置的列表(div)。里面有一个 relative 定位的 ul 是隐藏的。所以我试图通过添加一些类将这个 div 转换为 absolute 。通常，当
css - 绝对 td 的匹配高度
我正在尝试设置一个卡住列，唯一需要解决的问题是同一行上其他 td 的高度不会扩展以匹配绝对定位 td 的高度。由于卡住标题中的文本是任意的，它可以跨越多行。如果它不是绝对定位的，那么这将迫使同一行中
css - 绝对 div 居中和响应？
这个问题在这里已经有了答案: Centering text vertically and horizontally in a div (1 个回答) 关闭 5 年前。
css - 如何设置Div(绝对)宽度100%
当它的位置绝对时，我试图使一个框宽度为 100%？下图是我想要做的 https://i.imgur.com/qMaT361.gif float .box1 { position:re
javascript - 绝对 HTML 元素和浏览器滚动
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t
css - 绝对 Div 填充窗口的剩余部分
我有 3 个 div，都是 positioned: absolute，但是我想要填充窗口宽度的 div 只会适应其中文本的长度。我希望黄色 div #help 填充窗口的其余部分。我知道这听起来很菜
javascript - 绝对 .position() 值
这个问题在这里已经有了答案: Retrieve the position (X,Y) of an HTML element (32 个答案) 关闭 8 年前。有时候，当我请求某个对象的.posit

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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