时间戳

首页 > 解决方案 > 相对父级中的绝对子级，然后再一次，所有子级都在绝对父级中

html - 相对父级中的绝对子级，然后再一次，所有子级都在绝对父级中

问题描述

我知道，标题，对不起，但它是有道理的。我最终想要实现的是创建一个与主体“无关”的容器，该容器仍然尊重其大小限制，我可以在其中推送一些消息。

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

更详细地说，我正在尝试将child一个absolutediv 推入其中，#big-container这也是absolute. 为了让我child真正了解big-container它们，因为它们都是absolute，我决定引入一个相对的包装类。样式是这样的：

#big-container {
    position: absolute;
    z-index: 3; /* higher over everything else on the site */
}

.wrapper {
    position: relative;
}

#child {
    position: absolute;
}

现在，这工作得很好而且花花公子。除了......只有它自己。看，事情是，我只想将这些推child送到容器中，这样我就不会真正污染其他 div/正常流程。毕竟，它们完全脱离了潮流。但是，如果我这样做，那么下面的任何东西都会#big-container变得无法使用，因为它被它隐藏了。让我们看看它的实际效果：

body {
  width: 960px;
  height: 100%;
}

#big-container {
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.wrapper {
  display: block;
  width: 100%;
  height: inherit;
  position: relative;
  padding: 12px;
}

#child {
  background-color: red;
  border: 1px solid black;
  color: white;
  position: absolute;
}
<body>
  <h3> This is some content from the site!</h3>
  <p>...and some more!</p>
  <div id="big-container">
    <div class="wrapper">
      <div id="child">
        I am the child! Try to select anything below me, see if it works.
      </div>
    </div>
  </div>
</body>

我在这里想念什么？我觉得好像标记本身是错误的。我所要做的就是为他人着想，并将我的信息简单地包含在一个空间中。

标签： htmlcsscss-position

解决方案

我改变的只是你的big-container. 现在可以选择底部文本。

问题是：

你的big-container图层元素太大，覆盖了整个页面，所以你的点击只在这个元素上

你需要的是：

只是为了创建一个更高级别的层来显示你的推送消息

a) 所以你不需要一个实际的完全平铺的元素，而只是一个层，所以你不需要 100% 的宽度和高度。

b）您wrapper需要 100% 的宽度，这意味着来自父级，因此请保持您的父级宽度为 100%。

c）应该显示您的消息，因此请允许您的任何溢出big-container

body {
  width: 960px;
  height: 100%;
}

#big-container {
  display: block;
  height: 0;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  overflow: display;
}

.wrapper {
  display: block;
  width: 100%;
  height: inherit;
  position: relative;
  padding: 12px;
}

#child {
  background-color: red;
  border: 1px solid black;
  color: white;
  position: absolute;
}
<body>
  <h3> This is some content from the site!</h3>
  <p>...and some more!</p>
  <div id="big-container">
    <div class="wrapper">
      <div id="child">
        I am the child! Try to select anything below me, see if it works.
      </div>
    </div>
  </div>
</body>

推荐阅读