Question

我想使控制台覆盖在背景图像上，但无法定位工作。有一个容器div，其中有两个重叠的子div，一个用于半透明阴影，另一个用于文本。

什么是合适的CSS来适合孩子在容器的内容框中？

编辑：期望的结果是将黄色单词“ content”放置在图像中以蓝色突出显示的内容区域内，并在浏览器窗口中以50px的边距（顶部为150px）调整内容区域的大小。如果您运行该代码，则不会看到一个蓝色框-将所需的内容位置悬停在Chrome调试窗口中的内容框（标记为384 x 384）上即可。

所需的结果是：

“内容”一词出现在容器的内容区域内（图片中以蓝色显示），
如果提供的话，更多的内容文本将显示在蓝色内容区域内，而该区域之外则没有其他文字，
无论内容区域中包含什么文本，内容区域都不会更改大小，
调整视口大小时，内容区域的大小会发生变化，因此它始终比视口水平小100 px，垂直小200 px，
浏览器窗口为灰色背景。图像中蓝色显示的区域应具有透明的带红色背景和不透明的黄绿色文本。所需的输出中没有蓝色，蓝色只是说明了CSS正常工作时红色应该位于的位置。所需的输出是带有红色着色框和不透明黄色文本的灰色页面。

拨弄https://jsfiddle.net/dave2/381rnsy5/

body {
  background-color: gray;
}

#container {
  position: absolute;
  padding: 50px;
  padding-top: 150px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

#bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: red;
  opacity: 0.25;
  border: 1px solid blue;
  box-sizing: border-box;
}

#text {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 20px;
  overflow-y: hidden;
  color: greenyellow;
  border: 1px dashed;
  box-sizing: border-box;
}

<div id="container">
  <div id="bg">
    background
  </div>
  <div id="text">
    content
  </div>
</div>

Answer 1

这是你要去的吗？

https://jsfiddle.net/qjLbdtmv/2/

HTML

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="container">

        <div id="bg">
            background
        </div>

        <div id="text">
            content
        </div>

    </div>
</body>

</html>

CSS

body {
  background-color: gray;
}

#container {
  width: 100%;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
}

#bg,
#text {
  position: absolute;
  top: 150px;
  right: 50px;
  bottom: 50px;
  left: 50px;
}

#bg {
  background-color: red;
  opacity: 0.25;
  border: 1px solid blue;
  box-sizing: border-box;
}

#text {
  padding: 20px;
  overflow-y: hidden;
  color: greenyellow;
  border: 1px dashed;
  box-sizing: border-box;
}

子div只能基于其父级进行定位，但是您需要在父级上设置position才能实现。

在容器中放置内容

1 个答案: