Question

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

如何将这个div设置为position：absolute使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”）。

Answer 1

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

如果你的p呈现内联而不是一个上面的内容，很可能你没有定义你的DOCTYPE或者没有在你的html文档中使用html标签=＆gt;用它作为入门骨架。

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

Answer 2

您需要做的只是在父级上设置position: relative，在子级上设置position: absolute。如果您希望孩子占据父母的大小，我会使用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>

CSS重叠相同大小的div

2 个答案: