CSS重叠相同大小的div答案

【问题标题】：CSS Overlapping divs of equal sizeCSS重叠相同大小的div
【发布时间】：2017-07-09 19:11:37
【问题描述】：

我想要一个 div 在另一个 div 的顶部。在放置 position:absolute 之前，顶部 div 上的 p 看起来很棒，但是当我放置 position:absolute 时，它显示三个 p 在一条直线上，它们之间没有空格。

如何使用 position:absolute 制作这个 div，让 p 在不同的行中，就像它应该的那样？

这是我正在尝试做的一个示例：

<div class="box">
<p>Some text</p>

<div class="box-top">
<p>• Line 1</p>
<p>• Line 2</p>
<p>• Line 3</p>
</div>

</div>

就像我之前说的，我希望在另一个 div（“box”）的顶部有一个 div（“box-top”）。

【问题讨论】：

只需在.box 上使用position: relative 和在.box-top 上使用position: absolute，然后将其与top/left/right/bottom 和/或transform: translate() codepen.io/anon/pen/GEYmVK 一起使用
@MichaelCoker 非常感谢您的快速回复！但是如果我想让白盒覆盖黑盒，宽度和高度相同呢？同时这三行看起来像这样，一个在另一个的顶部？
更新了代码笔。您可以使用top: 0; left: 0; width: 100%; height: 100% 或top: 0; left: 0; right: 0; bottom: 0; codepen.io/anon/pen/GEYmVK
@MichaelCoker 请将您的答案作为答案发布，而不是评论:)
@Timothy 我做到了。

标签： html css position absolute

【解决方案1】：

这就是答案。希望这是您正在寻找的。一个 div 有黑色背景。重叠的 div 有一个不透明度为 50% 的红色背景。

如果你的 p 是内联渲染的，而不是一个在一个之上，很可能你没有定义你的 DOCTYPE 或者没有在你的 html 文档中使用 html 标签 => 使用它作为一个起始框架。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>
</html>

然后这是工作示例。

.flex {
  display:-webkit-box; /*OLD-iOS 6-,Safari 3.1-6 */
  display:-moz-box;    /*OLD-Firefox 19*/
  display:-ms-flexbox; /* TWEENER - IE 10 */
  display:-webkit-flex;/* NEW - Chrome */
  display: flex;
  position: relative;
}

.box {
  -webkit-box-flex: 1; /*iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;  /* Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex:1;
  position: absolute;
  background: black;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

.box-top {
  -webkit-box-flex: 1; /*iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;  /* Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex:1;
  position: relative;
  background: rgba(255,0,0,0.5); /* red */
  color: white;
}

<div class="flex">
<div class="box">
<p>Some text</p>
</div>
<div class="box-top">
<p>• Line 1</p>
<p>• Line 2</p>
<p>• Line 3</p>
</div>
</div>

【讨论】：

非常感谢！但是我仍然不知道为什么我的
一直在一行中显示一个并排显示，而不是像您的示例一样，一个在另一个之上。对此有什么解释吗？我必须对

或一般文本做些什么？
嘿，我没有你的 CSS 我不知道...请编辑你的帖子并添加你的 CSS。

【解决方案2】：

您需要做的就是在父节点上设置position: relative，在子节点上设置position: absolute。如果想让child占据parent的大小，我会使用top: 0; left: 0; right: 0; bottom: 0;进行定位。

.box {
  position: relative;
  background: black;
  color: white;
  height: 50vh;
}
.box-top {
  background: white;
  color: black;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

<div class="box">
  <p>Some text</p>
  <div class="box-top">
    <p>• Line 1</p>
    <p>• Line 2</p>
    <p>• Line 3</p>
  </div>
</div>

【讨论】：

使用 flexbox 代替 height: 50vh 让你的高度更加动态。
@AstenMies 你的意思是什么？我只是为演示设置了一个高度。 “我如何使用 position:absolute 使 p 出现在不同的行中，就像它应该的那样？” 父级的高度与 OP 的问题无关。
嘿，别担心，只是想在这里提供帮助。许多情况需要 div 的高度根据其内容进行调整，所以我认为在答案中预测这一点是一种很好的做法。特别是因为我们的朋友似乎开始使用 HTML。干杯?
@AstenMies 很酷，我只是不明白你对我的回答发表评论的意义。你要我改变它还是什么？父母的身高与他们的问题无关。
@AstenMies 嘿，我还没开始接触 HTML。我对这个
事情只有一个问题。