Html 如何将元素推到绝对元素之后

Html 如何将元素推到绝对元素之后,html,css,css-position,Html,Css,Css Position,我试图在元素本身之后显示元素的所有子元素。我有一个包装在一个中,它有位置:绝对及其顶部,右侧,底部和左侧都是0。在那之后,我有另一个包装在中。该div只有一个,下面有一个 这是HTML代码: <main> <section class="fullscreen"> <div class="container"> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolo

我试图在元素本身之后显示元素的所有子元素。我有一个
包装在一个
中,它有
位置:绝对
及其
顶部
右侧
底部
左侧
都是0。在那之后,我有另一个
包装在
中。该div只有一个
,下面有一个

这是HTML代码:

<main>
  <section class="fullscreen">
    <div class="container">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet</p>
      <a href="#">Link</a>
    </div>
  </section>
  <section>
    <h3>Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</main>

我怎样才能像这样显示页面,而不在
.fullscreen
之后定义一个边距?

从代码中可以看出,您希望
部分
元素占据全屏高度

你不需要定位就能做到这一点。现在有很好的支持,你可以只分配高度为100vh

*{
框大小:边框框;
保证金:0;
填充:0;
}
主要{
明确:两者皆有;
/*不需要,没有浮动*/
}
主要部分{
高度:100vh;
底部边框:2倍纯红;
}
主要部分集装箱{
位置:绝对位置;
最高:50%;
转化:translateY(-50%);
文本对齐:居中;
宽度:100%;
}

乱数假文
Lorem ipsum dolor sit amet

标题 知识产权是一种权利,是一种精英的权利,是劳动和财富的暂时性权利。但是,在最低限度上,我们需要一个实验室来进行日常工作。酒后驾车 这是一种不受欢迎的行为,它是一种不受欢迎的行为。除偶尔因疏忽而死亡外,不得因疏忽而导致动物死亡


您的意思是如何防止元件因绝对定位元件而向上移动?我认为问题在于你不喜欢这种定位。我完全不明白你为什么要用它。你想定位什么,在哪里?你能添加演示以便更好地理解吗
main {
  clear: both;
}
main section:nth-child(1) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -10;
}
main section:nth-child(1) div.container {
  position: absolute;
    top: 50%;
    transform: translateY(-50%);
  text-align: center;
  width: 100%;
  margin: auto;
}