我不知道如何在文本之前获得此文本

debugcn 发表于 Dev

命令块

我正在尝试获取文本，#contact以使其显示在页面主标题下方。但是它只是显示在顶部，我尝试了使用和不使用align函数。

这是代码。

        body.navbartext, html{
        margin:0px;
        overflow-x:hidden;
        font-family:helvetica;
        height:1080px;
    }

    ul.navbartext{
        list-style:none;
        padding:5px;
        display: block;
        width:100%;
        box-shadow: 1px 2px 40px #ccc;
        margin:0px;
    }

    a.navbartext{
        text-decoration: none;
        font-size:15px;
        color: black;
    }

    li.navbartext{
        display:inline-block;
        margin: 10px;
    }

    div.mainpagetitle{
        height: 200px;
        width: 400px;
        background: black;
        position: fixed;
        top:50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -200px;
    }

    body.mainpagetitle{
        padding: 0;
        margin: 0;
    }

    h1.mainpagetitle{
        font-size: 4em;
        margin: 0;
        padding: 0;
        text-align: center;
        font-family: helvetica;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    #subtitle {
        font-size: 2em;
        margin: 0;
        padding: 0;
        text-align: center;
        font-family: Roboto;
        position: absolute;
        top: 59%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    #contact {
        top: 0%;
    }

<body>
  <div>
    <ul class="navbartext">
      <li class="navbartext"><a class="navbartext" href="">Home</a></li>
      <li class="navbartext"><a class="navbartext" href="">Youtube</a></li>
      <li class="navbartext"><a class="navbartext" href="">Github</a></li>
      <li class="navbartext"><a class="navbartext" href="">Roblox</a></li>
      <li class="navbartext"><a class="navbartext" href="#contact">Contact</a></li>
    </ul>
  </div>
  <header>
    <h1 class="mainpagetitle">Web Dev, Game Dev</h1>
    <h2 id="subtitle">Subtitle</h2>
  </header>
    <div id="contact"><a href="contact">Contact Info</a></div>
</body>

约翰尼斯

您可以使用或任意适合的值来代替top: 0%of #contact（由于position绝对值，固定值或相对margin-top: 60%;值都不起作用，因此无效）。这会将其移动到绝对定位的元素下方，这些元素不是文档流的一部分，因此可以与其他元素重叠。

但是，以绝对的方式使用绝对定位的元素确实没有任何意义。通常，您应该以不同的方式安排代码（即，不使用那些绝对位置）

body.navbartext,
html {
  margin: 0px;
  overflow-x: hidden;
  font-family: helvetica;
  height: 1080px;
}

ul.navbartext {
  list-style: none;
  padding: 5px;
  display: block;
  width: 100%;
  box-shadow: 1px 2px 40px #ccc;
  margin: 0px;
}

a.navbartext {
  text-decoration: none;
  font-size: 15px;
  color: black;
}

li.navbartext {
  display: inline-block;
  margin: 10px;
}

div.mainpagetitle {
  height: 200px;
  width: 400px;
  background: black;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
}

body.mainpagetitle {
  padding: 0;
  margin: 0;
}

h1.mainpagetitle {
  font-size: 4em;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: helvetica;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#subtitle {
  font-size: 2em;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: Roboto;
  position: absolute;
  top: 59%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#contact {
  margin-top: 60%;
}

<div>
  <ul class="navbartext">
    <li class="navbartext"><a class="navbartext" href="">Home</a></li>
    <li class="navbartext"><a class="navbartext" href="">Youtube</a></li>
    <li class="navbartext"><a class="navbartext" href="">Github</a></li>
    <li class="navbartext"><a class="navbartext" href="">Roblox</a></li>
    <li class="navbartext"><a class="navbartext" href="#contact">Contact</a></li>
  </ul>
</div>
<header>
  <h1 class="mainpagetitle">Web Dev, Game Dev</h1>
  <h2 id="subtitle">Subtitle</h2>
</header>
<div id="contact"><a href="contact">Contact Info</a></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。