Html 绝对子对象在相对父对象中，然后，所有子对象都在绝对父对象中

我知道，这个标题，对不起，但它很有意义。我最终想要实现的是创建一个与身体无关的容器，它仍然尊重身体的大小限制，在这里我可以推送一些消息

<div id="big-container">
    <div class="wrapper">
        <div id="child">
        </div>
    </div>
</div>

现在，这个很好用。除了…只有它自己。看，问题是，我有点想把这些孩子推到容器中，这样我就不会真正影响其他div/正常的流。毕竟，它们完全脱离了流动。但若我这样做，那个么大容器下的任何东西都将变得无法使用，因为它隐藏了。让我们看看它的实际行动：

身体{ 宽度：960px； 身高：100%； } 大容器{ 显示：块； 身高：100%； 宽度：100%； 排名：0； 左：0； 位置：绝对位置； } .包装纸{ 显示：块； 宽度：100%； 身高：继承； 位置：相对位置； 填充：12px； } 孩子{ 背景色：红色； 边框：1px纯黑； 颜色：白色； 位置：绝对位置； } 这是一些来自网站的内容！ …还有更多

我是孩子！试着选择我下面的任何东西，看看它是否有效。

---

考虑到你想要的结果，我会把你的容器注射到身体的开始，用vh和vw来定义高度和宽度，让你的容器保持在流动中

#big-container {
  margin:0;
  display:block;
  width:100vw;
  height:100vh;
}

---

我解决了。这样行吗

身体{ 宽度：960px； 身高：100%； } 页面{ 位置：相对位置； z指数：1； } 大容器{ 显示：块； 身高：100%； 宽度：100%； 排名：0； 左：0； 位置：绝对位置； } .包装纸{ 显示：块； 宽度：100%； 身高：继承； 位置：相对位置； 填充：12px； } 孩子{ 背景色：红色； 边框：1px纯黑； 颜色：白色； 位置：绝对位置； z指数：2； } 这是一些来自网站的内容！ …还有更多

我是孩子！试着选择我下面的任何东西，它实际上是有效的。

---

我所改变的只是你的大容器的CSS。下面的文本现在可以选择了

问题是：

您的大容器层元素太大，无法覆盖整个页面，因此您的单击仅限于此元素

您需要的是：

仅用于创建显示推送消息的更高级别层

a所以您不需要实际的完全平铺元素，只需要一层，所以您不需要100%的宽度和高度

你的包装需要100%的宽度，这意味着从父级开始，所以让你的父级保持100%的宽度

你的信息应该被显示出来，所以只要允许你的大容器溢出就行了

身体{ 宽度：960px； 身高：100%； } 大容器{ 显示：块； 身高：0； 宽度：100%； 排名：0； 左：0； 位置：绝对位置； 溢出：显示； } .包装纸{ 显示：块； 宽度：100%； 身高：继承； 位置：相对位置； 填充：12px； } 孩子{ 背景色：红色； 边框：1px纯黑； 颜色：白色； 位置：绝对位置； } 这是一些来自网站的内容！ …还有更多

我是孩子！试着选择我下面的任何东西，看看它是否有效。

---

我不清楚你想从容器外的东西中得到什么行为，但是让容器粘起来而不是绝对的帮助吗？@SydneyY你能解释一下粘东西的选择吗？在我看来，两者都有道理。它如何改变div的行为？外面的东西基本上就是网站的其余部分。我希望这个容器被隔离。粘性在流中，而绝对在流外。是否希望：在页面加载时，您的容器将填充屏幕，但用户可以向下滚动查看content@SydneyY没错！让我读一下sticky，看看我能做些什么。@wahwah好吧，当然，但这就是我来这里的原因…怎么做？嘿，这很聪明。我将很快回顾并测试它如何与其他事物交互。

#big-container {
  margin:0;
  display:block;
  width:100vw;
  height:100vh;
}

let page = document.getElementsByTagName('body')[0]
let container = document.createElement('div')
container.setAttribute('id', 'big-container')
page.insertAdjacentElement('afterbegin', container)