代码之家 › 专栏 › 技术社区 › Dave

在容器中定位内容

css html

Dave · 技术社区 · 6 年前

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

什么样的CSS适合容器内容框中的子对象?

编辑:所需的结果是将黄色单词“content”放置在图像中以蓝色突出显示的内容区域内,并在浏览器窗口中以50px的边距(顶部为150px)调整内容区域的大小。如果你运行代码,你不会看到一个蓝色的框-在Chrome的调试窗口中,将鼠标悬停在内容框(标记为384x384)上,就会显示出所需的内容位置。

期望的结果是:

如果提供,蓝色内容区域内会显示更多内容文本,而该区域外不会显示任何内容文本,
无论内容区域中有什么文本,内容区域的大小都不会改变,
当调整视口的大小时,内容区域的大小会改变,因此它在水平方向上总是比视口小100 px,在垂直方向上总是比视口小200 px,

摆弄: 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>

1 回复 | 直到 6 年前

Shoelaced 6 年前

这就是你想要的吗?

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

<!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;
}

position

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前