有没有办法对文本进行绝对定位？

Question

我想使用top:x；或 bottom:x；规则，但我不知道如何对 H1 文本执行此操作。如果有人可以提供帮助，我将不胜感激。我尝试了相对定位，然后将绝对定位放在文本上。我是 css 的新手，所以我不确定该怎么做。我需要在那里放置更多文本，然后最终将表单文本也放置在那里，但 header 大声笑没有涵盖任何内容。

<!DOCTYPE html>
<html>
<head>
    <title>Project3</title>
</head>
<style>
*{
  margin:0;
  box-sizing:border-box;
  padding:0;
}
header{
  position: fixed;
  top: 0;
  height:100px;
  display: flex;
  align-items: center;
  background-color: #eee;
  width:100%;
  justify-content:space-between;
  z-index:2;
}
#header-img{
}
#logo{
  height:100px;
}
#nav-bar{
}
nav > ul{
  display:flex;
  justify-content:space-around;
  flex-direction:row;
  width:60vw;
  list-style-type:none;
}
nav > ul > li{
  border:black 2px solid;
  padding:30px;
}
.nav-link{
}

/*above this is the navbar and it's contents*/
body{
  height:100%;
}
.container{
  display:grid;
  height:100%;
  grid-template-areas:
  "left main right"
  "mleft mmain mright"
  "bleft bmain bright";
  grid-template-columns:15% 70% 15%;
  grid-template-rows:repeat(3, 500px);
}
.left{
  grid-area:left;
}
.main{
  grid-area:main;
  display:flex;
  justify-content:center;
  position:relative;
  text-align:center;
}
.right{
  grid-area:right;
}
.main > iframe{
}
.mleft{
  grid-area:mleft;
}
.mmain{
  grid-area:mmain;
  justify-content:center;
  display:flex;
  position:relative;
}
.mright{
  grid-area:mright;
}
.bleft{
  grid-area:bleft;
}
.bmain{
  grid-area:bmain;
}
.bright{
  grid-area:bright;
}
#video{
}
</style>
<body>
    <header id="header">
        <div id="header-img">
            <img id="logo" src="https://www.pikpng.com/pngl/m/26-262191_like-us-on-facebook-logo-facebook-image-like.png" alt="lol getcho mouse off me bitch">
        </div>
        <nav id="nav-bar">
            <ul>
                <li class="nav-link"><a href="#here">Home</a></li>
                <li class="nav-link"><a href="#there">About</a></li>
                <li class="nav-link"><a href="#over">Contacts</a></li>
            </ul>       
        </nav>
    </header>
    <div class="container">
        <div class="left"></div>
        <div class="main"><h1>(TEXT I WANT TO POSITION)</h1></div>
        <div class="right"></div>
        <div class="mleft"></div>
        <div class="mmain"> <iframe id="video"style="position:absolute;bottom:0;" width="600" height="315"src="https://www.youtube.com/embed/"></iframe> </div>
        <div class="mright"></div>
        <div class="bleft"></div>
        <div class="bmain"></div>
        <div class="bright"></div>
    </div>
</body>
</html>

Answer 1

我建议您了解定位的工作原理。这个link会对你有所帮助。 https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

如您所说，您想将文本放在 div 中。因此，首先将相对位置应用于 div.

div {
  position: relative;
}

然后对带顶部或底部的 h1 标签应用绝对定位属性。

div > h1 {
  position: absolute;
  top: 40px;
  left: 40px;
}

你可以查看下面的link，我创建了这支笔来演示用法。 https://codepen.io/prathameshkoshti/pen/OJXBeqp

有没有办法对文本进行绝对定位？

Is there a way to put absolute positioning on text?

html

css

text

positioning